el-table select echo effect

1. htmlThe part is as follows

1. type="selection"It is the actual check box
2. :row-key="getRowKey"(Must be a unique field, such as: id) and :reserve-selection="true"is necessary, you can record the selected data, it doesn't matter if you turn the page

<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>

Among them, getRowKey must return the only field. This example is written as follows; it can be written under the method or in data

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

3. After completing the above two steps, check the selected item; it is to traverse the table data and compare the selected data, and perform toggleRowSelectionoperations on the selected items in the table

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

4. If the selected data list is el-dialogopened in the form of , then it needs to be refreshed dialog, so you can’t just use visiblethe property to control the display and hiding, because this visibleis actually a physical hiding, to put it bluntly, it is cssthe display and hiding of the style control; Both will trigger the method, then the val data will be repeated, and the echoed data and the selected data cannot be accurately corresponded. At this time, you need to use the v-if command to control the display and hide. You should know the difference between the next and selection-changethe next carefully.v-ifv-show

Second, postscript

5. It's that simple, if you encounter something you can't see clearly, tell me in the comments, and you can answer it when you see it! ! !