antdesignvue表格table默认勾选⼏项的操作
为什么我同样的功能要⽤react 、vue 都写⼀遍？
啊我真是不是闲的蛋疼啊(～ o ～)~zZ
在 ant design vue 中，表格的第⼀列是联动的选择框
截⼀张官⽅⽂档图，图⽰最后⼀排就是禁⽤状态
点击 checkbox 会触发onChange , 从⽽得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
默认禁⽤disable 某项时，官⽅⽂档给出了例⼦：
rowSelection() {
const { selectedRowKeys } = this;
return {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: record => ({
props: {
disabled: record.name === 'Disabled User', // Column configuration not to be checked
name: record.name,
}
}),
}
}
主要是getCheckboxProps ⾥⾯的disabled 属性控制的。
默认选中某项时，需要 getCheckboxProps ⾥⾯的defaultChecked 属性控制：
业务场景：勾选了⼏项保存之后，下次进来编辑还是需要展⽰之前勾选的项，这时候就⽤到了默认勾选的属性
之前只贴了核⼼逻辑，好多⼈好像没看懂，我把整体的都贴上来了。
核⼼代码defaultChecked: selectedRowKeys.includes(record.id) 的思路就是所有表格⾥所有包含已选中项的id，都给他默认选中data () {
return {
// ...
record: '',
rowSelection: {
selectedRowKeys: [],
onChange: SelectChange
}
},
methods: {
handleEdit (record) {
//...省略我的业务逻辑
if (record) {
//...省略我的业务逻辑
let selectedRowKeys =
(leIdList.length > 0 && leIdList.split(',')) || [];
selectedRowKeys: selectedRowKeys,
onChange: SelectChange,
getCheckboxProps: record => {
return {
props: {
defaultChecked: selectedRowKeys.includes(record.id)
}
};
}
};
} else {
antdesignvuetable动态表头
selectedRowKeys: [],
onChange: SelectChange
}
}
},
onSelectChange (selectedRowKeys) {
// 去重 Array.from(new Set(arr))
}
}
ant design vue 版本和 react 版本写法略有不同，disabled 和 defaultChecked 都挂在了props 属性下。
补充知识：Ant-Design-Pro中Table组件rowSelection⽅法的⼀些坑
如下所⽰：
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
在 <Table/> 组件中有 rowSelection={rowSelection} ⽅法，可以让Table的第⼀列成为联动的选择框。
API中说到通过 rowSelection.selectedRowKeys 来控制选中项。⽐较坑的是，selectedRowKeys 控制的只是dataSource当前的顺序编号。
⼀定要加上rowKey="id"或者rowKey={record => record.id}，后来经过多次调试发现很多BUG都跟这个参数有关，不然会导致联动的选择框状态异常。id可以⾃定义为dataSource中的某个值。
以上这篇ant design vue 表格table 默认勾选⼏项的操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。