笔记-antd table 隐藏列

aliceyang2012

于 2024-07-18 16:57:38 发布

阅读量1k

点赞数 3

CC 4.0 BY-SA版权

文章标签：笔记 java 前端

本文链接：https://blog.csdn.net/aliceyang2012/article/details/140527513

table展示数据信息，但有些字段需要不显示出来

方法：

在columns中设置 colSpan: 0, className: 'colHidden'

<a-table :columns="columns" :rowKey="row => row.id" :dataSource="data" :pagination="false" :loading="loading"
             :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
             :bordered="true" size="small" class="matTable ant-table-sticky">

const columns = [
  { title: '产品名称', dataIndex: 'ProductName', width: '13%' },
  { title: 'ProductId', dataIndex: 'ProductId', key: 'MaterialId', colSpan: 0, className: 'colHidden' }
]

<style lang="less" scoped>
.matTable /deep/ .ant-table-tbody > tr > td.colHidden {
  display: none;
}
</style>