由于业务需要,使用elementui的el-table组件时,只能勾选一条数据,如果选中多条,默认变为当前这条,之前勾选的默认清空
<el-table
:data="sarAccessListDatas"
tooltip-effect="dark"
style="width: 100%"
border
height="100%"
:header-cell-style="{
background: '#f5f1f1',
color: '#333333',
fontSize: '16px',
fontWeight: 'bold',
height: '48px'}"
@row-click="rowClick"
@select="select"
@selection-change="selectListChange"
ref="detailedSelection"
>
<el-table>
// 表格某一行的单击事件
rowClick(row, column) {
const selectData = this.selectList
this.$refs.detailedSelection.clearSelection()
if( selectData.length === 1 ) {
selectData.forEach(item => {
// 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
if (item === row) {
this.$refs.detailedSelection.toggleRowSelection(row, false);
}
// 不然就让当前的一行勾选
else {
this.$refs.detailedSelection.toggleRowSelection(row, true);
}
})
}
else {
this.$refs.detailedSelection.toggleRowSelection(row, true);
}
},
select(selection, row) {
// 清除 所有勾选项
this.$refs.detailedSelection.clearSelection()
// 当表格数据都没有被勾选的时候 就返回
// 主要用于将当前勾选的表格状态清除
if(selection.length === 0) return
this.$refs.detailedSelection.toggleRowSelection(row, true)
},
//选择清单选择框改变
selectListChange(data) {
this.selectedList = [];
for (let i = 0; i < data.length; i++) {
this.selectedList.push(data[0]);
}
},