在做pc端项目时候,经常会碰到这种需求,可以根据选择框来控制表格的一些字段展示或者不展示,效果图如下:

字段全部展示

部分字段不展示

开始

首先你需要el-Tabl、el-popover、el-checkbox-group等组件来实现这种联动效果
先写出ui结构,以下为选择框和弹出层的ui结构

<el-popover placement="bottom" width="50" trigger="click">
      <el-checkbox-group v-model="checkedTableColumns" @change="checkedChange">
        <el-checkbox
          v-for="(item, index) in columns"
          :label="item.label"
          :key="index"
          >{{ item.label }}</el-checkbox
        >
      </el-checkbox-group>
      <el-button type="primary" slot="reference" style="margin-right: 10px"
        >设置显示字段
      </el-button>
</el-popover>

以下为表格的部分核心代码

<el-table-column
        v-for="item in bindTableColumns"
        :prop="item.prop"
        :label="item.label"
        :key="item.props"
        align="center"
      ></el-table-column>

以下为核心数据,首先需要定义表格需要展示的字段数据columns

data(){
  return{
    columns: [
        {
          prop: 'applyName',
          label: '商户名称',
          isShow: true,
        },
        {
          prop: 'brokerId',
          label: '商户ID',
          isShow: true,
        },
        {
          prop: 'accessWay',
          label: '接入方式',
          isShow: true,
        },
        {
          prop: 'agentId',
          label: '商户号',
          isShow: true,
        },
        {
          prop: 'clientId',
          label: '终端号',
          isShow: true,
        },
        {
          prop: 'buildingName',
          label: '数据来源',
          isShow: true,
        },
        {
          prop: 'brokerName',
          label: '店铺类型',
          isShow: true,
        },
      ],
   }
}

然后通过columns中的isShow字段来确定字段展不展示,表格绑定的数据bindTableColumns和选择框需要的数据如下,通过计算属性实现,

 computed: {
    bindTableColumns() {//表格展示的字段
      return this.columns.filter((v) => {
        return v.isShow == true;
      });
    },
    checkedTableColumns: {//el-checkbox-group绑定的label内容
      get() {
        return this.bindTableColumns.map((v) => v.label);
      },
      set(value) {
        this.columns.forEach((v) => {
          if (value.includes(v.label)) {
            v.isShow = true;
          } else {
            v.isShow = false;
          }
        });
      },
    },
  },

然后通过点击选择框就可以实现表格字段动态展示的效果了

结束