Vue 3.X 表格组件el-table初始化时保持多选框的选

        父页面调用子组件时，传入el-table中应当选中的值列表，但在使用toggleRowSelection时触发两次selection-change事件，无法正确显示。

        可以看到打印了两次selection。

         解决方法：el-table标签需要包含row-key、reserve-selection属性

1.  
   <el-table @row-click="clickRow"
2.  
   ref="refTable"
3.  
   :reserve-selection="true"
4.  
   :row-key="getRowKey"
5.  
   :data="userList"
6.  
   @selection-change="handleSelectionChange" height="260px"
7.  
   >
8.  
   <el-table-column type="selection" width="55"></el-table-column>        
9.  
   </el-table>

        在script里使用nextTick

1.  
   props.ids.forEach(id => {
2.  
   nextTick(() => {
3.  
   userList.value.forEach(row => {
4.  
   if (row.userName == id.userName) {
5.  
   proxy.$refs["refTable"].toggleRowSelection(row, true);
6.  
   }
7.  
   })
8.  
   });
9.  
   });

这篇好文章是转载于：学新通技术网