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

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

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[