React项目中antd应用--关于table表格rowSelection的禁用(ps:低版本)

最新推荐文章于 2024-04-17 16:35:54 发布

原创最新推荐文章于 2024-04-17 16:35:54 发布 · 6.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#react #antd #table #rowSelection禁用

这篇博客探讨了在React项目中使用antd库时，如何在table组件的rowSelection特性下实现自定义禁用功能。作者通过在Table标签上添加rowSelection配置，并将getCheckboxProps函数公开和绑定this，详细解释了禁用特定行的实现步骤。

在antd官方网站可以发现实例：

// 通过 rowSelection 对象表明需要行选择
const rowSelection = {
  getCheckboxProps: record => ({
    disabled: record.name === '胡彦祖',    // 配置无法勾选的列
  }),
};

需求：自定义禁用的实现过程

首先：对Table标签添加’rowSelection’配置项

<Table bordered pagination={false} rowSelection={rowSelection} columns={columns} dataSource={dataSource}/>

然后：将函数getCheckboxProps暴露到公共区域并声明绑定this

const  rowSelection = {
                          onSelect: this.onSelect,//行选择事件
                          onSelectAll: this.onSelectAll,//全选择事件
                          getCheckboxProps:this.getCheckboxProps//禁用事件
                       }

this.getCheckboxProps=this.getCheckboxProps.bind(this)
this.onSelect=this.onSelect.bind(this)
this.onSelectAll=this.onSelectAll.bind(this)

最后，定义禁用项()

getCheckboxPropss(record) {
         return ({
              disabled: this.state.Array.some(item => (&&record.itemId === item.itemId))
            })
    }
    //this.state.Array为react一数组，当行元素的itemId与数组项的itemId相同时，禁用该行