为什么我同样的功能要用react 、vue 都写一遍 ？
啊我真是不是闲的蛋疼啊(～ o ～)~zZ
在 ant design vue 中 ， 表格的第一列是联动的选择框
截一张官方文档图，图示最后一排就是禁用状态
image.png
点击 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 属性控制：
业务场景：勾选了几项保存之后，下次进来编辑还是需要展示之前勾选的项，这时候就用到了默认勾选的属性
this.rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: this.onSelectChange,
getCheckboxProps: record => {
return {
props: {
defaultChecked: selectedRowKeys.includes(record.id)
}
};
}
};
ant design vue 版本和 react 版本写法略有不同，disabled 和 defaultChecked 都挂在了props 属性下。
如有错误或疑问，欢迎指出~
