注意的坑:
1. 要回显的行的数据必须是渲染表格的数组中的数据 引用地址必须指向同一个 不然 无法自动勾选
2. 触发toggleRowSelection 的时候会触发selection-change方法 如果你在@selection-change中做了一下赋值操作会被清空
/**
* 1.tableData 渲染表格的数据
* 2.tableRef 表格组件的Ref实例
* 3.item 必须是tableData中的item 不能传入selectList中的item 否则无法勾选
* 4. 觉得有用点个赞 收藏一下 后续出一下跨页面勾选不丢失 自动回显当前页的帖子
*/
// 1.第一个坑 解决示例
tableData.value.forEach((item:any)=>{
const index = _selectList.value.findIndex(selectItem=>selectItem.id==item.id);
if(index!=-1){
detailRef.value?.tableRef?.toggleRowSelection(item,true)
}
})
// 2.第二个坑 解决示例
//视图
<el-table :data="tableData" ref="detailRef" @selection-change="handleChange" />
//js
const selectList = ref([])
cosnt handleChange = (list)=>{
selectList.value = list;
}
const detailRef = ref(null)
const initSelectCheckBox = ()=>{
tableData.value.forEach((item:any)=>{
const index = _selectList.value.findIndex(selectItem=>selectItem.id==item.id);
if(index!=-1){
//运行这个方法的时候 toggleRowSelection 会触发handleChange 方法导致selectList 回显的被清空
detailRef.value?.tableRef?.toggleRowSelection(item,true)
}
})
initSelectCheckBox ();
}
// 解决问题后的代码
<el-table :data="tableData" ref="detailRef" @selection-change="handleChange" />
//js
//通过这个变量控制初始化的时候触发handleChange方法
const selectFlag = ref(true)
const selectList = ref([])
cosnt handleChange = (list)=>{
if(selectFlag.value) return;
selectList.value = list;
}
const detailRef = ref(null)
const initSelectCheckBox = ()=>{
tableData.value.forEach((item,idx)=>{
const index = _selectList.value.findIndex(selectItem=>selectItem.id==item.id);
if(idx==tableData.value.length-1){
selectFlag.value=false;
}
if(index!=-1){
//运行这个方法的时候 toggleRowSelection 会触发handleChange 方法导致selectList 回显的被清空
detailRef.value?.tableRef?.toggleRowSelection(item,true)
}
})
setTimeOut(()=>{
initSelectCheckBox ();
},200)
}
、、