Ant-Design-Vue-Pro表格前的checkbox根据条件禁用

最终效果

  • 整体禁用

  • 某一行禁用

实现

首先，使用 Table 组件

1
2
3
4
5
6
7
8
9
<a-table
  size="middle"
  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: (record) => setCheckboxProps(record) }"
  :columns="columns"
  :dataSource="loadData"
  :pagination="false"
  :loading="loading"
  :rowKey="(record) => record.id"
/>

其中实现复选框禁用是getCheckboxProps: (record) => setCheckboxProps(record)

在 methods 中定义：

1
2
3
4
5
6
7
8
9
setCheckboxProps (record) {
  console.log(record)
  return {
    props: {
      disabled: record.id === 3
      // disabled: this.isSuper
    }
  }
},

这样就可以根据数据行条件判断，并禁用该行的复选框了，也可以根据外部条件，整体禁用复选框。

软件版本：vue-antd-pro 3.0.2

  • “ant-design-vue”: “^1.7.6”
  • “vue”: “^2.6.0”,

参考资料