elementUI 動態加載table列

需求：
根據需要選擇動態展示table列表；


用for循環來控制列表展示，使用checkbox 來控制哪些數據顯示

<template>
  <div>
    <el-button type="primary" @click="showData()">展示</el-button>
    <div id="table-content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column v-for="col in cols" :prop="col.prop" :label="col.label">
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="選擇需要展示的字段" :visible.sync="dialogFormVisible" width="40%" center top='15vh'>
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="item in cities" :label="item.prop" :key="item.prop"> {{item.label}}</el-checkbox>
      </el-checkbox-group> 
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false" size='medium'>取 消</el-button>
        <el-button type="primary" @click="confirmShow" size='medium'>確定</el-button>
      </div>
    </el-dialog> 
  </div>
</template>

<script> 
  const cityOptions = ['date', 'name', 'address']; //所有的數據
  export default {
    data() {
      return {
        checkAll: true,  //默認全選
        checkedCities: ['date', 'name', 'address'], //默認全選所有的數據
        cities: [{
            prop: 'date',
            label: '日期'
          },
          {
            prop: 'name',
            label: '姓名'
          },
          {
            prop: 'address',
            label: '地址'
          },
        ],   //對象數組全部的數據
        isIndeterminate: false,   //默認全選
        dialogFormVisible: false,
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
        }],
        cols: [{
            prop: 'date',
            label: '日期'
          },
          {
            prop: 'name',
            label: '姓名'
          },
          {
            prop: 'address',
            label: '地址'
          },
        ],
        tempCols: [],  //臨時的數據容器
      };
    },
    methods: {
    //全選按鈕
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
	//單個選中
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      showData(row) {
        this.dialogFormVisible = true;
      },
      confirmShow() {
        this.tempCols = [];
        if (this.checkedCities.length < 1) {
          this.$message.warning("請至少選擇一項數據");
          this.dialogFormVisible = true;
        } else {
          for (var i = 0; i < this.cities.length; i++) {
            for (var j = 0; j < this.checkedCities.length; j++) {
              if (this.cities[i].prop == this.checkedCities[j]) {
                this.tempCols.push(this.cities[i]);
              }
            }
          }
          console.log(this.tempCols);
          this.cols = this.tempCols;
          this.dialogFormVisible = false;
        } 
      },
     
    
    }
  };
</script>