1.主要属性
唯一键
:row-key=“rowKeyInit”
设置给每一行唯一id
@ rowKeyInit(row) { return row.recordId },
选中
table中设置selection-change=“handleSelectionChange”
handleSelectionChange(arr) {
// console.log(arr)
let selectArray = []
if (arr && arr.length > 0) {
selectArray = arr.map((item) => item.recordId)
}
// console.log(selectArray)
this.$emit('handleSelectionChange', selectArray) //将选中数组传给父组件
},
跨页记忆
在el-table-column的多选框设置:reserve-selection=“true”
完整代码
//HTML
<el-table
:data="tableData"
border
style="width: 100%"
stripe
max-height="500"
ref="recordsData"
:row-key="rowKeyInit"
@selection-change="handleSelectionChange"
>
>
<el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>
</el-table>
//JS
rowKeyInit(row) {
return row.recordId
},
handleSelectionChange(arr) {
// console.log(arr)
let selectArray = []
if (arr && arr.length > 0) {
selectArray = arr.map((item) => item.recordId)
}
// console.log(selectArray)
this.$emit('handleSelectionChange', selectArray)
},
//取消多选
close(){
this.$refs.recordsData.clearSelection() //清除选中的数据
}