vue+antd中table动态隐藏显示列数据

Lucky_girl_wan

于 2021-09-27 15:52:37 发布

阅读量2.9k

点赞数 1

分类专栏：记录 vue 文章标签： vue.js

本文链接：https://blog.csdn.net/lucky_girl_wan/article/details/120508999

版权

Ant Design Table组件动态列搜索过滤 React

关键词由CSDN通过智能技术生成

vue 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

记录

23 篇文章 0 订阅

订阅专栏

应用场景：table中老师、学生、年龄三列，当搜索学生时3列都显示，当搜索老师时学生列不显示，默认搜索值为学生

table中columns的数据如下：

const columns = [
  {
    title: '老师',
    dataIndex: 'teacher',
    ellipsis: true
  },
  {
    title: '学生',
    dataIndex: 'student',
    ellipsis: true
  },
  {
    title: '年龄',
    dataIndex: 'age',
    ellipsis: true
  }
]

解决办法如下：


    handleSearchFun(type) {
      const studentObj= {
         title: '学生',
         dataIndex: 'student',
         ellipsis: true
      }
      type === '老师' ? columns.splice(1, 1) : columns.splice(1, 0, teacherObj)
    }