el-table 表格列实现动态显示与隐藏

当列项过多时，此组件可以自定义想要展示的列，并且能本地保存选择的列项，如果觉得能帮到你的话，点个👍呗~

一、效果展示

二、实现原理

通过给列添加v-if来实现动态显示与隐藏效果，每次选择完通过本地储存保留选项，以便下次打开

三、具体代码

1、子组件

定义一个CustomColumn组件

<template>
  <div>
    <el-dialog
      title="自定义列"
      class="column-dialog"
      :visible.sync="dialogVisible"
    >
      <div class="columns">
        <div class="fl">
          <div class="ht">
            <b>字段列表</b
            ><el-checkbox
              v-model="allcheck"
              @change="changeAll"
              class="ck"
              :indeterminate="isIndeterminate"
              >全选</el-checkbox
            >
          </div>
          <el-checkbox-group v-model="columnsGroup">
            <el-checkbox
              v-for="(item, index) in columns"
              @change="danSelect(item, index)"
              :label="item"
              :key="index"
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="fr">
          <div class="ht"><b>已选择字段</b></div>
          <ul>
            <li
              v-for="(item, index) in selectColumns"
              v-if="item.show"
              :key="index"
            >
              {{ item.label }}
            </li>
          </ul>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="select">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CustomColumn",
  props: {
    columns: {
      type: Array,
      default: [],
    },
  },

  data() {
    return {
      // 是否全选
      allcheck: false,
      // 弹窗
      dialogVisible: false,
      // 回显已选择字段
      selectColumns: [],
      // 已选的项
      columnsGroup: [],
      // 负责多选框样式控制
      isIndeterminate: false,
    };
  },

  watch: {
    columnsGroup: function (val) {
      this.allcheck = val.length === this.columns.length;
      this.isIndeterminate = val.length > 0 && val.length < this.columns.length;
    },
  },

  methods: {
    //全选/反选
    changeAll() {
      this.isIndeterminate = false;
      if (this.allcheck) {
        this.columnsGroup = [];
        this.selectColumns.forEach((res) => {
          res.show = true;
          this.columnsGroup.push(res.label);
        });
        this.allcheck = true;
      } else {
        this.selectColumns.forEach((res) => {
          res.show = false;
        });
        this.columnsGroup = [];
        this.allcheck = false;
      }
    },

    //单选事件
    danSelect(item, index) {
      let flag = this.columnsGroup.indexOf(item);
      this.selectColumns.forEach((res) => {
        if (res.label == item) {
          res.show = flag == -1 ? false : true;
        }
      });
    },

    //确认选择
    select() {
      let flag = true;
      this.selectColumns.forEach((res) => {
        if (res.show) {
          flag = false;
        }
      });
      if (flag) {
        this.$message.error("请选择列");
        return;
      }
      this.$emit("selectColumns", JSON.stringify(this.selectColumns));
      localStorage.setItem("selectColumns", JSON.stringify(this.selectColumns));
      this.dialogVisible = false;
    },

    // 取消
    cancel() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped="scoped">
/deep/ .el-dialog__header {
  padding: 12px;
  border-bottom: 1px solid #eee;
}
/deep/ .el-dialog__title {
  font-size: 16px;
}
/deep/ .el-dialog__body {
  padding: 20px;
}
.column-dialog /deep/ .el-dialog {
  width: 40%;
  min-width: 550px;
}
.columns {
  display: flex;
}
.columns .ht {
  margin-bottom: 10px;
}
.columns .ht .ck {
  margin-left: 12px;
}
.columns .fl {
  flex: 1;
}
.columns .fl .el-checkbox-group {
  overflow: hidden;
}
.columns .fl .el-checkbox-group .el-checkbox {
  margin-right: 0;
  float: left;
  width: 50%;
  margin-top: 10px;
}
.columns .fr {
  width: 200px;
  border-left: 1px solid #f1f1f1;
  padding-left: 20px;
  margin-left: 20px;
}
.columns .fr ul {
  max-height: 375px;
  overflow-y: auto;
}
.columns .fr ul li {
  margin-bottom: 5px;
}
</style>

2、父组件

<template>
  <div class="app-container">
    <el-table
      v-loading="loading"
      :data="configList"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="参数主键"
        align="center"
        prop="configId"
        v-if="
          showColumns.some((r) => {
            return r.label == '参数主键' && r.show;
          })
        "
      />
      <el-table-column
        label="参数名称"
        align="center"
        prop="configName"
        :show-overflow-tooltip="true"
        v-if="
          showColumns.some((r) => {
            return r.label == '参数名称' && r.show;
          })
        "
      />
      <el-table-column
        label="参数键名"
        align="center"
        prop="configKey"
        :show-overflow-tooltip="true"
        v-if="
          showColumns.some((r) => {
            return r.label == '参数键名' && r.show;
          })
        "
      />
      <el-table-column
        label="参数键值"
        align="center"
        prop="configValue"
        :show-overflow-tooltip="true"
        v-if="
          showColumns.some((r) => {
            return r.label == '参数键值' && r.show;
          })
        "
      />
      <el-table-column
        label="系统内置"
        align="center"
        prop="configType"
        v-if="
          showColumns.some((r) => {
            return r.label == '系统内置' && r.show;
          })
        "
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_yes_no"
            :value="scope.row.configType"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        align="center"
        prop="remark"
        :show-overflow-tooltip="true"
        v-if="
          showColumns.some((r) => {
            return r.label == '备注' && r.show;
          })
        "
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="180"
        v-if="
          showColumns.some((r) => {
            return r.label == '创建时间' && r.show;
          })
        "
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:config:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:config:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <CustomColumn
      ref="columns"
      :columns="columns"
      @selectColumns="selectColumns"
    ></CustomColumn>
  </div>
</template>

<script>
import CustomColumn from "@/components/CustomColumn/index.vue";

export default {
  components: { CustomColumn },
  data() {
    return {
      。。。。

      //所有列
      columns: [
        "参数主键",
        "参数名称",
        "参数键名",
        "系统内置",
        "备注",
        "创建时间",
      ],
      //显示列
      showColumns: [],
    };
  },
  created() {
  },
  mounted() {
    this.initColumn();
  },
  methods: {
    。。。

    /* 自定义表格列表 */
    //初始化列（当没有缓存时默认全选并处理数据）
    initColumn() {
      let arr = [];
      if (JSON.parse(localStorage.getItem("selectColumns"))) {
        this.showColumns = JSON.parse(localStorage.getItem("selectColumns"));
        this.showColumns.forEach((ele) => {
          if (ele.show == true) {
            arr.push(ele.label);
          }
        });
        this.$nextTick(() => {
          this.$refs.columns.selectColumns = JSON.parse(
            localStorage.getItem("selectColumns")
          );
          this.$refs.columns.columnsGroup = arr;
          this.$refs.columns.isIndeterminate = false;
        });
      } else {
        this.columns.forEach((res) => {
          this.showColumns.push({ show: true, label: res });
          arr.push(res);
        });
        this.$nextTick(() => {
          this.$refs.columns.selectColumns = JSON.parse(
            JSON.stringify(this.showColumns)
          );
          this.$refs.columns.columnsGroup = arr;
          this.$refs.columns.allcheck = true;
          this.$refs.columns.isIndeterminate = false;
        });
      }
    },
    //自定义列
    setColumn() {
      this.$refs.columns.dialogVisible = true;
      let arr = [];
      if (JSON.parse(localStorage.getItem("selectColumns"))) {
        this.showColumns = JSON.parse(localStorage.getItem("selectColumns"));
        this.showColumns.forEach((ele) => {
          if (ele.show == true) {
            arr.push(ele.label);
          }
        });
        this.$nextTick(() => {
          this.$refs.columns.selectColumns = JSON.parse(
            localStorage.getItem("selectColumns")
          );
          this.$refs.columns.columnsGroup = arr;
          this.$refs.columns.isIndeterminate = false;
        });
      }
    },
    // 获取选中列
    selectColumns(data) {
      this.$nextTick((res) => {
        this.showColumns = JSON.parse(data);
        this.$refs["multipleTable"].doLayout();
      });
    },
  },
};
</script>