业务实现效果
HTML部分 :
着重注意:row-key="getRowKey"与ref="multipleTable"两个属性
<el-table
:data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
:row-style="{ height: '70px' }"
:row-key="getRowKey"
:cell-class-name="addclass"
:cell-style="changeCellStyle"
v-loading="loading"
key="tableShangPin"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
ref="multipleTable"
>
<el-table-column :reserve-selection="true" type="selection" width="55"> </el-table-column>
JS部分:
this.dpriceConfIdStr为标识数组
this.confList为列表项数据
进行双重数组循环遍历对比标识位数组
返回要默认勾选的元素
toggleRowSelection()方法记得加 this.$nextTick
(默认勾选项,true)
getRowKey(row) {
return row.dpriceConfId
},
this.$nextTick(() => {
this.dpriceConfIdStr.map(vl => {
this.confList.map(item => {
if (item.dpriceConfId == vl) {
this.$refs.multipleTable.toggleRowSelection(item, true)
}
})
})
})
我以为大功就这样完成了 于是自测了一把
哦吼 果然不出我所料
原因是当DOM发生变化时时数据发生改变 默认勾选的数据就丢失了
后来又摸了一边官网发现有一个:reserve-selection="true"属性
可以保留数据更新之前的属性 加在el-table-column【0】就ok啦~~~~~~
原创不易 有助请赞哦·~~~~