antd vue根据条件显示某一列、字典管理

问题描述

在开发中需要根据需求在不同条件下同一个页面展示不同列表，今天我的开发就遇到了这个问题。
字典管理：首先展示父级页面，从父级页面点击进入子级页面，父级页面没有值这一列，子级有该列。

解决

1.首先定义一个parentId来存放当前页面的父级id，如果为父级页面那么parentId为空，如果为子级页面parentId=-1

2.复制columns列表项为columnsCopy，然后根据parentId去让它过滤对应的列，就能返回最新的columns了

3.在获取列表数据里添加过滤条件

loadData: (parameter) => {
        let query = {}
        if (parameter) {
          query = {
            .............
          }
        }
        //判断是否为父级，如果是不显示值那一列
        if (this.parentId == '') {
          this.columns = this.columns.filter((item) => item.dataIndex !== 'num')
        } else {
          this.columns = this.columnsCopy
        }
        ........
      },

最主要的就是

 if (this.parentId == '') {
   this.columns = this.columns.filter((item) => item.dataIndex !== 'num')
   } else {
     this.columns = this.columnsCopy
 }

效果图