Vue antdv复选框限制选择数量,默认禁用复选框
2021-12-03 本文已影响0人
洃冭鎯oo
<!-- table表格 :row-selection="onSelectionChange" -->
<a-table
:row-selection="onSelectionChange"
>
</a-table>
<!-- 在data里边创建checkIdList: [], selectedRows: []集合,
想要把选择的数据清空的时候,只需要把 this.checkIdList = [] -->
computed: {
onSelectionChange() {
let _this = this
return {
selectedRowKeys: _this.checkIdList,
onchange(selectedRowKeys, selectedRows) {
<!-- 选择超出限制进行提示 -->
if (selectedRowKeys.length > 10) {
_this.$message.error('每次操作最多只能选择10条数据')
return
}
<!-- 每次操作先清空原来数据 -->
_this.checkIdList = []
if(selectedRows.length > 0) {
selectedRows.forEach(s => {
_this.checkIdList .push(s.id)
})
}
_this.selectedRows = selectedRows
},
<!-- 根据条件复选框是否禁用 -->
getCheckboxProps: record => ({
props: {
disabled: record.name !== '小红'
}
})
}
}
}