Ant Design table自定义复选框的默认不可选状态
vue用ant design我也是第一次用,关于table自定义的东西使用起来一踩一个坑。我的需求是已经添加过的人员,下一次不可以再添加了,使用复选框的disabled属性。官网上的getCheckboxProps中的disabled的值是record.name==="XXX",我在用的过程中肯定是一个list,然后我就想用函数返回true或false,虽然功能不影响,但是打印台一直报错,提示..
vue用ant design我也是第一次用,关于table自定义的东西使用起来一踩一个坑。
我的需求是已经添加过的人员,下一次不可以再添加了,使用复选框的disabled属性。官网上的getCheckboxProps中的disabled的值是record.name==="XXX",我在用的过程中肯定是一个list,然后我就想用函数返回true或false,虽然功能不影响,但是打印台一直报错,提示disabled支持布尔,不支持函数。后来才找到办法解决,下面直接上代码
1. table定义
<a-table
:loading="loading"
rowKey="userId"
:rowSelection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
onSelect: selectEvent,
onSelectAll: onSelectAll,
getCheckboxProps: getCheckboxProps
}"
:columns="column"
:dataSource="tableList"
:pagination="false"
/>
2. 我声明了两个选中的变量是因为,我的需求是table的数据源不同,在切换时,选中的行要叠加,所以又用了selectedTotalRows。用的时候我发现一个神奇的东西,它自带的selectedRowKeys,及时切换数据源,选中的key就是叠加的,但是自带的selectedRows,切换数据源后,返回的是当前tableList中选中的行数组,跟我需要的不一样,所以定义了selectedTotalRows。
const column = [
{
title: '姓名',
dataIndex: 'userName'
},
{
title: '机构名',
dataIndex: 'organName'
}
];
export default {
name: "commandAddMember",
data() {
return {
tableList: [], // 人员列表
selectedRowKeys: [], // 选中的行key
selectedTotalRows: [], // 选中的行数据
column, // table列名
};
},
props: {
memberList: Array
},
methods: {
/**
* 选择框的默认属性配置
*/
getCheckboxProps(record) {
return ({
props: {
disabled: this.memberList.some(item => item.id === record.userId)
}
})
},
/**
* 选中选项事件
*/
onSelectChange (selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys;
},
/**
* 复选框点击事件
*/
selectEvent(record, selected) {
if (selected) {
this.selectedTotalRows.push(record);
} else {
this.selectedTotalRows = this.selectedTotalRows.filter(item => item.userId !== record.userId);
}
},
/**
* 全选事件
*/
onSelectAll(selected, selectedRows, changeRows) {
if (selected) {
const addRows = changeRows.filter(item => {
return this.selectedTotalRows.every(val => item.userId !== val.userId)
});
addRows.forEach(item => {
this.selectedTotalRows.push(item)
})
} else { // 全不选的基础是全选,不用判断是否存在,直接删除
this.selectedTotalRows = this.selectedTotalRows.filter(item => {
return changeRows.every(val => item.userId !== val.userId)
});
}
}
}
最后一点,官网上的:rowSelection="{rowSelection}"方式,我就不再写了。主要想说的就是disabled的数据返回问题,只接收boolean
getCheckboxProps(record) {
return ({
props: {
disabled: this.memberList.some(item => item.id === record.userId)
}
})
},
更多推荐
所有评论(0)