因为element-ui上面的带checkbox的表格,是多选。如下操作,能把多选变成单选。最终结果如下图:
代码如下:
<el-table ref="multipleTable" :data="dialogTables" @select-all="dialogCheck" @select="dialogCheck" @selection-change="dialogCheckChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column property="ANAME" label="模块名称"></el-table-column>
</el-table>
:事先声明变量:selectioned(存放所选择的数组)
/**
* 单选操作,全选按钮失效操作
*/
dialogCheck: function(selection, row) {
this.$refs.multipleTable.clearSelection()
if (selection.length === 0) { // 判断selection是否有值存在
return
}
if (row) {
this.selectioned = row
this.$refs.multipleTable.toggleRowSelection(row, true)
}
},
/**
* 取消单选的checkbox
*/
dialogCheckChange(row) {
if (row.length === 0) {
this.selectioned = null
}
}