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

<!-- 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 !== '小红'
                 }
            })
        }
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容