ant Design表格控制列动态隐藏或显示

有时候使用a-tabel组件后台不提供表头数组，需要前端自己编写表头，为了兼容多个组件会有不同的页面显示不同的表头，为了避免冗余配置，我们可以使用

方法一： colSpan属性隐藏列。

方法二： 添加className属性。

注意：colSpan隐藏列可能存在问题就是列表头不占位置，但是数据还存在占位置，导致列表展示错位

解决可以使用方法二。

方法一：

<template>
  <a-table :dataSource="dataSource" :columns="tableColumns" />
</template>
<script>
  export default {
    setup() {
      return {
        dataSource: [
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
        ],

       tabkeColumns: [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
　　　　　　　colSpan:(route.path==='SIM'?1:0)  //如果页面是SIM则显示该列，否则不显示该列 
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
        ],
      };
    },
  };
</script>

方法二：添加className通过添加css样式display来控制元素显示与隐藏。

<template>
  <a-table :dataSource="dataSource" :columns="tableColumns" />
</template>
<script>
  export default {
    setup() {
      return {
        dataSource: [
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
        ],

       tabkeColumns: [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
　　　　     className:route.path==='SIM'?'tableShow':'tableHiddle'  //如果页面是SIM则显示该列，否则不显示该列                 
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
        ],
      };
    },
  };
</script>  
<style>
.tableHiddle {
  display: none;
}
.tableShow{
  display: revert;
}
</style>