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怎么實現動態控制表格列的顯示和隱藏”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。