Vue实战（二）：控制列的显示

Vue实战（二）：控制列的显示

一、背景

在显示数据的过程中，如果出现了列过多的情况，这是就需要控制列的显示。

二、实现过程

1、布局

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <span style="text-align: center">实现列显示配置</span>
      </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col :span="24">
        <el-popover title="勾选要显示的列" trigger="click" width="540">
          <el-checkbox-group v-model="checkedCol" size="mini" plain>
            <el-checkbox
              class="el-checkbox-width"
              v-for="(item, index) in checkGroup"
              :key="index"
              :label="item"
              :value="item"
            ></el-checkbox>
          </el-checkbox-group>
          <el-button slot="reference" type="success" size="mini"
            >列显示配置</el-button
          >
        </el-popover>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table border :data="dataList">
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column
            label="年龄"
            prop="age"
            v-if="colData[0].isTrue"
          ></el-table-column>
          <el-table-column
            label="性别"
            prop="sex"
            v-if="colData[1].isTrue"
          ></el-table-column>
          <el-table-column
            label="班级名称"
            prop="className"
            v-if="colData[2].isTrue"
          ></el-table-column>
          <el-table-column
            label="电话号码"
            prop="phone"
            v-if="colData[3].isTrue"
          ></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

2、数据初始化

data() {
    return {
      colData: [
        { label: "年龄", isTrue: false },
        { label: "性别", isTrue: false },
        { label: "班级名称", isTrue: false },
        { label: "电话号码", isTrue: false },
      ],
      checkGroup: ["年龄", "性别", "班级名称", "电话号码"],
      checkedCol: [],
      dataList: [
        {
          id: "1",
          name: "张三",
          age: "18",
          sex: "男",
          className: "1班",
          phone: "123456",
        },
      ],
    };
  },

3、对checkedCol属性实现监听

watch: {
    //监听选择列
    checkedCol(val) {
      let arr = this.checkGroup.filter((i) => !val.includes(i));
      this.colData.filter((i) => {
        if (arr.indexOf(i.label) != -1) {
          i.isTrue = false;
        } else {
          i.isTrue = true;
        }
      });
    },
  },

三、效果展示

初始列显示：

列显示配置：

最后效果展示：