vue-ant-design如何点中行后并勾选他的复选框
程序员文章站
2022-05-31 18:47:44
...
1.首先我们需要明白,复选框的勾选是和selectedRowKeys这个属性有关系的
2.获取选中行的数据和table的customRow这个属性有关系,如下
如何点击行触发选择行为,官网也有做了说明:https://codesandbox.io/s/000vqw38rl
或者可以参考这个博客:https://blog.csdn.net/qq_35331167/article/details/90174428
---------------------------------------------分割号-----------------------------------------------------
我是基于分装好 的stable上进行操作的,所以有些地方可能会有出入
selectedRowKeys: [], selectedRows: [], optionss: { alert: { show: true, clear: () => { this.selectedRowKeys = [] } }, rowSelection: { selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange } }, optionAlertShow: false
:customRow="setRow"
setRow(record) {
return {
on: {
click: () => {
let flag = false
let keys = []
keys = this.selectedRowKeys
if (keys.indexOf(record.IDS) >= 0) {
flag = true
}
if (flag) {
keys.splice(keys.findIndex(item => item === record.IDS), 1)
this.selectedRows.splice(this.selectedRows.findIndex(item => item === record.IDS), 1)
} else {
keys.push(record.IDS)
this.selectedRows.push(record)
}
this.$refs.table.selectmyRorKey(keys)
this.optionss = {
rowSelection: {
selectedRowKeys: this.selectedRowKeys,
onChange: this.onSelectChange
}
}
/* 如果需要拿到选中的数据,可以把这个打印出来看下
console.log('这里是选中的数据='+JSON.stringify(this.selectedRows))
*/
}
}
}
},
//给ids序号赋值
let z = 0
for (let i = 0; i < data.page.list.length; i++) {
console.log('i=' + i)
data.page.list[i].IDS = z
z += 1
}
``