Vue表格动态显示隐藏列(表格中包括静态表头和动态表头)

<template>
  <div class="service-asset-management--wrapper">
    <section class="action-section">
      <el-dropdown :hide-on-click="false">
        <el-button size="mini" type="success" icon="el-icon-s-grid"></el-button>
        <el-dropdown-menu slot="dropdown">
          <el-checkbox-group v-model="check">
            <el-dropdown-item v-for="(item,index) in checkList" :key="index">
              <el-checkbox :label="item" :key="item"></el-checkbox>
            </el-dropdown-item>
          </el-checkbox-group>
        </el-dropdown-menu>
      </el-dropdown>
    </section>

    <el-table border :data="tableData">
      <el-table-column v-if="lists[0].isTrue" fixed prop="stationName" label="站点名称" align="center" width="150"></el-table-column>
      <el-table-column v-if="lists[1].isTrue" prop="name" label="终端名称" align="center" width="120"></el-table-column>
      <el-table-column v-if="lists[2].isTrue" prop="online" label="在线状态" align="center" width="80"></el-table-column>
      <el-table-column v-if="lists[3].isTrue" prop="workStatus" label="工作状态" align="center"></el-table-column>
      <el-table-column v-if="lists[4].isTrue" prop="dataUpdateTime" label="数据更新时间" align="center" width="155"></el-table-column>
      <el-table-column v-if="lists[5].isTrue" prop="workTotalTime" label="累积运行时间" align="center" width="140"></el-table-column>
      <el-table-column v-if="lists[6].isTrue" prop="workCurrentTime" label="本次运行时间" align="center" width="140"></el-table-column>
      <!--动态列-->
      <div v-for="(item,index) in tableHeader" :key="item.id">
        <el-table-column v-if="lists[index+7].isTrue" :label="item.name" align="center" width="100">
          <template slot-scope="scope">
            <span style="color:#16c114">
              {{ scope.row.variableValues !== null ? getTempData(scope.row.variableValues, item.id,item.unit) : '/' }}
            </span>
          </template>
        </el-table-column>
      </div>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'centralizeMonitor',
    data() {
      return {
        tableHeader:[], //动态表头数据
        check:[],
        checkList:[],
        lists:[
          {label:'站点名称',isTrue:true},
          {label:'终端名称',isTrue:true},
          {label:'在线状态',isTrue:true},
          {label:'工作状态',isTrue:true},
          {label:'数据更新时间',isTrue:true},
          {label:'累积运行时间',isTrue:true},
          {label:'本次运行时间',isTrue:true}
        ],
        tableData: [] //后台返回的数据
      }
    },
    watch:{
      check(newVal){
        if (newVal) {
          var arr = this.checkList.filter(i => newVal.indexOf(i) < 0) //未选中
          this.lists.map(i => {
            if (arr.indexOf(i.label) !== -1) {
              i.isTrue = false
            } else {
              i.isTrue = true
            }
          })
        }
      }
    },
    created() {
      this.getListData()
    },
    methods: {
      //请求后台接口获取表格动态列逻辑
      getListData(){
        //从后台拿到动态表头的数据并循环
        this.checkList = ['站点名称','终端名称','在线状态','工作状态','数据更新时间','累积运行时间','本次运行时间']
        this.check = ['站点名称','终端名称','在线状态','工作状态','数据更新时间','累积运行时间','本次运行时间']
        //将动态表头循环并把表头的名称push到checkList，check，lists中
        this.tableHeader.forEach(item =>{
          this.checkList.push(item.name)
          this.check.push(item.name)
          this.lists.push({label:item.name,isTrue:true})
        })
      }

    },
  };
</script>

<style scoped lang="scss">
  .action-section {
    padding-bottom: 20px;
    @include flex-space-between;
  }
  /deep/ .el-table th{
    background-color: #F4F4F4;
    color: #555;
  }
</style>