<el-checkbox :value="form.test=== '1'" @change="val => $set(form,'test',val ? '1' : '0')" label="测试" border></el-checkbox>
<el-table @current-change="clickChange"><el-table-column label="选择" width="55"><template slot-scope="scope"><el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio></template></el-table-column></el-table>
EL-TABLE点击当前行选中，只允许选择一个，上一个选中的自动取消
<template>
<div class=" mytable-container">
<div class="table-container">
<el-table :data="testList" style="width: 100%" border
ref="multipleTable"
@selection-change="handleSelectionChange"
@select="selectChange"
@row-click="handleRowClick"
@select-all="selectAll">
<el-table-column width="60px" type="selection" align="center"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
handleSelectionList: []
}
},
methods: {
handleSelectionChange(value) {
this.handleSelectionList = value
},
selectChange(selection, row) {
if (selection.length > 1) {
const del_row = selection.shift()
this.$refs.multipleTable.toggleRowSelection(del_row, false)
}
},
// 点击行触发，选中或不选中复选框
handleRowClick(row, column, event) {
this.$refs.multipleTable.toggleRowSelection(row)
this.selectChange(this.handleSelectionList)
},
selectAll(selection) {
if (selection.length > 1) {
selection.length = 1
}
}
}
}
</script>
项目中遇到的问题记录一下
