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怎么实现动态控制表格列的显示和隐藏”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。