一、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、就是那么简单,如果遇到看不清的地方,评论告诉我 ,看到即解答!!!