Bootstrap

element plus 框架中的el-table组件 复选框初始化回显的问题

注意的坑:
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)
    
    
   }
 、、

;