elementui table表格动态展示列

    <el-form >
      <el-form-item>
        <el-input  placeholder="项目名称/作者" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button >查询</el-button>
      </el-form-item>
      //右侧小图标
      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="lists" style="float: right">
          <el-button size="medium" circle icon="el-icon-menu" @click="showColumn()" />
      </el-tooltip>
      //弹框
      <el-dialog :title="title" :visible.sync="open" append-to-body>
        <el-transfer
          :titles="['显示', '隐藏']"
          v-model="value"
          :data="lists"
          @change="dataChange"
        ></el-transfer>
      </el-dialog>
    </el-form>
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    

    <script>
      export default {
    data () {
      return {
        // 显隐数据
        value: [],
        // 弹出层标题
        title: "显示/隐藏",
        // 是否显示弹出层
        open: false,
        // 列信息
        lists:[
          {label:'排序',visible:true, key: 0},
          {label:'项目名称',visible:true, key: 1},
          {label:'项目简介',visible:true, key: 2},
          {label:'项目时间',visible:true, key: 3},
          {label:'项目地点',visible:true, key: 4},
          {label:'行业场景',visible:true, key: 5},
          {label:'封面图片',visible:true, key: 6},
          {label:'作者',visible:true, key: 7},
          {label:'创建时间',visible:true, key: 8},
          {label:'审核状态',visible:true, key: 9},
          {label:'审核人姓名',visible:true, key: 10},
          {label:'审核时间',visible:true, key: 11},
          {label:'审批意见',visible:true, key: 12},
          {label:'展示状态',visible:true, key: 13},
          {label:'是否推荐',visible:true, key: 14},
        ],
     },
       }
    methods: {
      // 右侧列表元素变化
      dataChange(data) {
        for (var item in this.lists) {
          const key = this.lists[item].key;
          this.lists[item].visible = !data.includes(key);
        }
      },
      // 打开展示显隐列dialog
      showColumn() {
        this.open = true;
      },
       }
    }
    </script>
    <style>
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    

    <el-table-column
        v-if="lists[0].visible"
        prop="sort"
        header-align="center"
        align="center"
        label="排序">
     </el-table-column>
     <el-table-column
        prop="title"
        v-if="lists[1].visible"
        header-align="center"
        align="center"
        label="项目名称">
    </el-table-column>
    <el-table-column
        v-if="lists[2].visible"
        prop="info"
        header-align="center"
        align="center"
        label="项目简介">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.info" placement="top">
            <p class="descStyle">{{scope.row.info}}</p>
          </el-tooltip>
        </template>
     </el-table-column>