<template>
<el-table
height="450px"
ref="tableList"
:data="dataList"
stripe
:row-key="getRowKeys"
@selection-change="handleSelectionChange"
>
<el-table-column :reserve-selection="true" type="selection" width="55"> </el-table-column>
</el-table>
</template>
<script>
data(){
return{
dataList: [],
selectList :[],
choosePeople, //多选内容
rowSelectFlag : false,
getRowKeys(row){
return row.id
}
},
},
methods:{
//回显的时候默认选中
showCheck() {
setTimeout(() => {
this.rowSelectFlag = true
this.selectList = this.personList // 父组件传的值
this.dataList.forEach(row => {
const matchedIndex = this.selectList.findIndex(item => item.userId == row.userId)
this.$refs['tableList'].toggleRowSelection(row, matchedIndex != -1)
})
this.rowSelectFlag = false
}, 0);
},
// 选择数据时触发
handleSelectionChange(val) {
if (this.rowSelectFlag) return
this.selectList = val
},
}
</script>
注意: :row-key=“getRowKeys” 和 reserve-selection="true"是必须的,
设置rowSelectFlag避免重复选择