el-table 选中回显效果

一、html部分如下

1、type="selection"就是现实选框
2、:row-key="getRowKey"（必须是唯一的字段，例如：id）和:reserve-selection="true"是必要的，可以记录选中的数据，翻页也无所谓

<el-row justify="center">
  <el-table ref="multipleTable" :data="productList" :row-key="getRowKey" :cell-style="cellClass" stripe style="width: 100%;" border @selection-change="handleSelectionChange">
    <el-table-column min-width="30" :reserve-selection="true" type="selection"/>
    <el-table-column label="货号" min-width="100" align="center" prop="modelDesc"/>
    <el-table-column label="产品名称" min-width="100" align="center" prop="productName"/>
    <el-table-column label="规格型号" min-width="100" align="center" prop="modelName"/>
  </el-table>
</el-row>

其中getRowKey必须返回唯一的字段，本例写法如下；可以写在方法下或者data中

getRowKey(row) {
    
    
  return row.modelId + ''
},

3、做好以上两步之后就是勾选选中项目了；就是遍历table数据比较已经选中的数据，表格中对已经选中的做toggleRowSelection操作

this.productList.forEach(item=>{
    
    
  if(this.multipleSelection.some(data=>data.modelId===item.modelId)){
    
    
     this.$refs.multipleTable.toggleRowSelection(item,true)//这样就可以了
   }
 })

4、如果这个选择数据列表是以el-dialog的形式打开的，那就需要刷新dialog，那就不能只是用visible属性控制显示隐藏，因为这个visible其实是物理隐藏，说白了就是css样式控制的显示隐藏；但是回显每次都会触发selection-change方法，那么val数据会重复，回显的数据和选中的数据不能准确的对应，这时候需要用v-if指令控制显示隐藏，仔细想下v-if和v-show的区别你应该就知道了

二、后记

5、就是那么简单，如果遇到看不清的地方，评论告诉我 ，看到即解答！！！