美文网首页
Vue antdv复选框限制选择数量,默认禁用复选框

Vue antdv复选框限制选择数量,默认禁用复选框

作者: 洃冭鎯oo | 来源:发表于2021-12-03 10:55 被阅读0次
<!-- 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 !== '小红'
                 }
            })
        }
    }
}

相关文章

网友评论

      本文标题:Vue antdv复选框限制选择数量,默认禁用复选框

      本文链接:https://www.haomeiwen.com/subject/pnupxrtx.html