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

这篇文章主要介绍了vue+elementui怎么实现动态控制表格列的显示和隐藏的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue+elementui怎么实现动态控制表格列的显示和隐藏文章都会有所收获，下面我们一起来看看吧。

imdex.vue

<template>
  <div>
    <div>
      <el-table :data="tableData" border  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>

关于“vue+elementui怎么实现动态控制表格列的显示和隐藏”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue+elementui怎么实现动态控制表格列的显示和隐藏”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。