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 !== '小红'
                 }
            })
        }
    }
}
上一篇 下一篇

猜你喜欢

热点阅读