vue+elementui实现动态控制表格列的显示和隐藏

 这篇文章主要介绍了vue+elementui实现动态控制表格列的显示和隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue+elementui(table,多选框)实现动态控制表格列的显示和隐藏，供大家参考，具体内容如下

imdex.vue

<template>
  <div>    <div>      <el-table :data="tableData" border style="width: 100%" ref="table">        <el-table-column prop="index" label="序号" width="150">          <template slot-scope="scope">            <div>{{ scope.$index + 1 }}</div>          </template>        </el-table-column>        <el-table-column          v-for="(item, index) in againRender"          :width="item.width"          :prop="item.prop"          :key="index"          show-overflow-tooltip          :label="item.label"        ></el-table-column>      </el-table>    </div>    <div class="dsadas">      <new-checkbox :all-item-data="itemList" :change-props="changeProps" />    </div>  </div></template><script>import axios from "axios";// 采用异步加载,防止父组件引入子组件，子组件的的钩子函数全部执行完毕const newCheckbox = () => ({ 
  component: import("./checkBox.vue"),
  delay: 2000,
  timeout: 2000,
});export default {
  data() {
    return {
      tableData: [],
      againRender: [],
      itemList: [
        {
          allListDate: [
            // 后台数据结构跟这有一样            { label: "姓名", width: "120", prop: "name" },
            { label: "性别", width: "120", prop: "sex" },
            { prop: "age", label: "年龄", width: "120" },
            { prop: "styChild", label: "身份", width: "120" },
            { prop: "gradeClass", label: "学历", width: "200" },
          ],
          selectedList: [
            { label: "姓名", width: "120", prop: "name" },
            { label: "性别", width: "120", prop: "sex" },
            { prop: "age", label: "年龄", width: "120" },
          ],
        },
      ],
    };
  },
  components: { newCheckbox },
  mounted() {
    this.getElementVauleHieen();
  },
  methods: {
    changeProps(value) {
      this.$nextTick((_) => {
        this.againRender= value;
        this.$refs.table.doLayout;
      });
    },
    getElementVauleHieen() {
      axios.get("http://localhost:3000/elementVauleHieen").then((res) => {
        this.tableData = res.data;
      });
    },
  },
};</script><style lang="less"></style>

checkBox.vue文件 

<template>
  <div>    <div>      <el-checkbox        :indeterminate="isIndeterminate"        v-model="checkAll"        @change="handleCheckAllChange"        >全选</el-checkbox
      >
    </div>    <el-checkbox-group      v-model="checkedCities"      @change="handleCheckedCitiesChange"    >      <el-checkbox        v-for="(item, index) in allItemDataChecked"        :label="item.label"        :key="index"        @change="(val) => checkboxChange(val, item, index)"        >{{ item.label }}</el-checkbox
      >
    </el-checkbox-group>  </div></template><script>export default {
  name: "checkBox",
  data() {
    return {
      isIndeterminate: false,
      checkAll: false,
      checkedCities: [],
      allItemDataChecked: this.allItemData[0].allListDate,
      checkboxChangeList: [],
    };
  },
  props: {
    allItemData: {
      type: Array,
      default: () => [],
    },
    changeProps: {
      type: Function,
      default: () => false,
    },
  },
  mounted() {
    let list = [];
    if (this.allItemDataChecked.length) {
      this.allItemDataChecked.forEach((element) => {
        this.allItemData[0].selectedList.forEach((item) => {
          if (element.prop === item.prop && element.label === item.label) {
            list.push(item.label);
          }
        });
      });
      this.checkedCities = list;
    }
  },
  watch: {
    checkedCities(newVlaue) {
      this.checkboxChangeList = []; // 防止多次点击重复触发数据      if (newVlaue.length === 0) {
        this.changeProps([]);
      } else {
        this.allItemDataChecked.forEach((ele) => {
          newVlaue.forEach((item) => {
            if (ele.label === item) {
              this.checkboxChangeList.push(ele);
              this.checkboxChange();
            }
          });
        });
      }
    },
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = [];
      let result = [];
      this.checkedCities = val
        ? this.allItemDataChecked.forEach((element) => {
            result.push(element.label);
          })
        : [];
      this.checkedCities = result;
    },
    handleCheckedCitiesChange(value) {
      this.checkAll = value.length === this.allItemDataChecked.length;
    },
    checkboxChange() { // 发现这个没用      this.changeProps(this.checkboxChangeList);
    },
  },
};</script><style lang="less"></style>