React Ant Desgin 如何隐藏，置灰Table表格中的某一列

最新推荐文章于 2024-06-05 15:34:38 发布

置顶入夏忆梦

最新推荐文章于 2024-06-05 15:34:38 发布

阅读量766

点赞数 10

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/XikYu/article/details/135870579

版权

文章描述了一个在表格组件中，根据isDeleteThingName变量的值（默认不显示）动态过滤表列，并根据该值设置某行背景色的技术实现。如果isDeleteThingName等于0，则应用特定CSS样式。

摘要由CSDN通过智能技术生成

隐藏：

  let isDeleteThingName = false


        {
            title: '是否生效',
            dataIndex: 'isDeleteThingName',
            key: 'isDeleteThingName',
            width: 2
        }, 





 <Table
                    // columns={cxjdtableColumns}
                    columns={
                        //在这里做判断
                        !isDeleteThingName ? cxjdtableColumns.filter((item) => item.dataIndex !== 'isDeleteThingName') : cxjdtableColumns
                    }
                    size="middle"
                    dataSource={tableDatasource.list}
                    style={{ textAlign: 'center' }}
                    pagination={false}
                    bordered
                    rowClassName={getRowClassName} //改变某一行的背景颜色
                    />

置灰：

 import isDeleteName from './style.module.less';

.warning {
  background: #e3dede;
}



  const getRowClassName = (record) => {
        if (record.isDeleteThingName === '0') {
            console.error("====",record.isDeleteThingName)
            return `${isDeleteName.warning}`; // 加 s. 是因为上面引入的问题
        } else {
            return '';
        }
    };


<Table
                    // columns={cxjdtableColumns}
                    columns={
                        //在这里做判断
                        !isDeleteThingName ? cxjdtableColumns.filter((item) => item.dataIndex !== 'isDeleteThingName') : cxjdtableColumns
                    }
                    size="middle"
                    dataSource={tableDatasource.list}
                    style={{ textAlign: 'center' }}
                    pagination={false}
                    bordered
                    rowClassName={getRowClassName} //改变某一行的背景颜色
                    />