首先在el-table绑定方法myselect:
<el-table
v-loading="tableLoading"
ref="multipleTable"
:data="tableData"
header-cell-class-name="custom-table"
@select="mySelect"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="30"
align="center"
fixed
/>
<el-table-column
type="index"
prop="id"
label="序号"
width="50"
align="center"/>
<el-table-column
prop="name"
label="别名"
width="150"
show-overflow-tooltip
align="center"/>
</el-table>
在methods里面定义方法:
mySelect(selection, row) {
// selection 当前页面所有选中的项
// row 当前点击操作的项
if (selection.indexOf(row) >= 0) { // 新增(勾选上)
selection.map(el => {
if (this.allSelects.indexOf(el.id) === -1) {
// 新添加(allSelects是后端返回已经被选择的id数组)
this.allSelects.push(el.id)
}
})
console.log('所有选中的', this.allSelects)
} else { // 取消勾选
this.allSelects.map((el2, index) => {
if (el2 === row.id) {
this.allSelects.splice(index, 1)
}
})
console.log('删除后的数组', this.allSelects)
}
},
然后在获取分页数据时,勾选已经选中的项(this.tableData是分页数据列表)
checkedSelected() {
this.$nextTick(() => {
this.tableData.forEach(row => {
if (this.allSelects.indexOf(row.id) >= 0) {
this.$refs.multipleTable.toggleRowSelection(row, true)
}
})
})
},
最后保存时把this.allSelects的值传给后端就OK了,有不合理的地方欢迎大家指出