ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-09-16 17:31:37  阅读:439  来源: 互联网

标签:name 表格 title age ant Design dataIndex key address


有时候使用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>

 

 

 css属性样式:

 

标签:name,表格,title,age,ant,Design,dataIndex,key,address
来源: https://www.cnblogs.com/evident/p/16700615.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有