el-table 手动选择展示列

一个需求

效果

备忘一下

<template>
  <div>
    <div class="credit_box">
      <div style="display:flex;justify-content: end">
        <el-popover style="margin: 10px 13px 0;" placement="left" width="140" trigger="click">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="选择1"></el-checkbox>
            <div style="height: 5px"></div>
            <el-checkbox label="选择2"></el-checkbox>
            <div style="height: 5px"></div>
          </el-checkbox-group>
          <div style="height: 10px"></div>
          <i slot="reference" style="cursor: pointer; display: flex; align-items: center; height: 100%" size="medium">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
              <rect x="0.5" y="0.5" width="31" height="31" rx="3.5" fill="white" stroke="#D8DCE6" />
              <g clip-path="url(#clip0_3_1319)">
                <path
                  d="M6 15.9998C6 15.1353 6.1097 14.2964 6.31595 13.4963C7.40622 13.5528 8.48848 13.0101 9.0718 11.9998C9.65467 10.9902 9.58406 9.78271 8.99121 8.86701C10.1835 7.69529 11.6683 6.82022 13.326 6.36133C13.8222 7.33385 14.8333 7.99982 16 7.99982C17.1667 7.99982 18.1778 7.33385 18.674 6.36133C20.3317 6.82022 21.8165 7.69529 23.0088 8.86701C22.4159 9.78271 22.3453 10.9902 22.9282 11.9998C23.5115 13.0101 24.5938 13.5528 25.6841 13.4963C25.8903 14.2964 26 15.1353 26 15.9998C26 16.8643 25.8903 17.7032 25.6841 18.5033C24.5938 18.4468 23.5115 18.9895 22.9282 19.9998C22.3453 21.0094 22.4159 22.2169 23.0088 23.1326C21.8165 24.3043 20.3317 25.1794 18.674 25.6383C18.1778 24.6658 17.1667 23.9998 16 23.9998C14.8333 23.9998 13.8222 24.6658 13.326 25.6383C11.6683 25.1794 10.1835 24.3043 8.99121 23.1326C9.58406 22.2169 9.65467 21.0094 9.0718 19.9998C8.48848 18.9895 7.40622 18.4468 6.31595 18.5033C6.1097 17.7032 6 16.8643 6 15.9998ZM10.8039 18.9998C11.434 20.0912 11.6146 21.3459 11.3682 22.5236C11.776 22.8138 12.2101 23.0652 12.6649 23.2741C13.5618 22.4712 14.7392 21.9998 16 21.9998C17.2608 21.9998 18.4382 22.4712 19.3351 23.2741C19.7899 23.0652 20.224 22.8138 20.6318 22.5236C20.3854 21.3459 20.566 20.0912 21.1962 18.9998C21.8262 17.9085 22.8225 17.1248 23.9655 16.7493C23.9884 16.5015 24 16.2516 24 15.9998C24 15.7481 23.9884 15.4981 23.9655 15.2504C22.8225 14.8749 21.8262 14.0912 21.1962 12.9998C20.566 11.9084 20.3854 10.6538 20.6318 9.47605C20.224 9.18588 19.7899 8.93447 19.3351 8.72552C18.4382 9.52844 17.2608 9.99982 16 9.99982C14.7392 9.99982 13.5618 9.52844 12.6649 8.72552C12.2101 8.93447 11.776 9.18588 11.3682 9.47605C11.6146 10.6538 11.434 11.9084 10.8039 12.9998C10.1738 14.0912 9.17754 14.8749 8.03451 15.2504C8.01157 15.4981 8 15.7481 8 15.9998C8 16.2516 8.01157 16.5015 8.03451 16.7493C9.17754 17.1248 10.1738 17.9085 10.8039 18.9998ZM16 18.9998C14.3431 18.9998 13 17.6567 13 15.9998C13 14.343 14.3431 12.9998 16 12.9998C17.6569 12.9998 19 14.343 19 15.9998C19 17.6567 17.6569 18.9998 16 18.9998ZM16 16.9998C16.5523 16.9998 17 16.5521 17 15.9998C17 15.4475 16.5523 14.9998 16 14.9998C15.4477 14.9998 15 15.4475 15 15.9998C15 16.5521 15.4477 16.9998 16 16.9998Z"
                  fill="#A1A7B8" />
              </g>
              <defs>
                <clipPath id="clip0_3_1319">
                  <rect width="24" height="24" fill="white" transform="translate(4 4)" />
                </clipPath>
              </defs>
            </svg>
          </i>
        </el-popover>
      </div>
      <div class="credit_table">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="date" label="数据" min-width="120">
          </el-table-column>
          <el-table-column prop="name" label="数据" min-width="130">
          </el-table-column>
          <el-table-column prop="score" label="数据" sortable min-width="100">
          </el-table-column>
          <el-table-column prop="score" label="数据" sortable width="" min-width="100">
          </el-table-column>
          <el-table-column prop="level" label="数据" sortable width="" min-width="100">
          </el-table-column>
          <el-table-column prop="level" label="数据" sortable width="" min-width="100">
          </el-table-column>
          <el-table-column prop="level" label="数据" sortable width="" min-width="100">
          </el-table-column>
          <el-table-column prop="level" label="数据" sortable width="" min-width="100">
          </el-table-column>
          <el-table-column prop="level" label="数据" sortable width="" min-width="100">
          </el-table-column>
          <el-table-column prop="level" label="数据" sortable width="" min-width="100">
          </el-table-column>
          <el-table-column prop="level" label="数据" sortable width="" min-width="100">
          </el-table-column>
          <el-table-column prop="level" label="数据" sortable width="" min-width="100">
          </el-table-column>

          <el-table-column v-for="(item, index) in checkList" :key="index" :label="item">
            <template slot="header">{{ item
            }}</template>
            <template slot-scope="scope">{{
              scope.row[ListFilters[ListFilters.findIndex((items) => items.label == item)].value]
            }}</template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {
    
  },
  data() {
    return {
      ListFilters: [
        {
          label: '选择1',
          value: 'negative',
        },
        {
          label: '选择2',
          value: 'opinion',
        },
      ],
      checkList: [],
      tableData: [{
        date: '12342',
        name: '23321313',
        score: '90',
        level: 'AAA',
        negative: '选择1',
        opinion: '选择2'
      }, {
        date: '12342',
        name: '23321313',
        score: '90',
        level: 'AAA',
        negative: '选择1',
        opinion: '选择2'
      }, {
        date: '12342',
        name: '23321313',
        score: '90',
        level: 'AAA',
        negative: '选择1',
        opinion: '选择2'
      }, {
        date: '12342',
        name: '23321313',
        score: '90',
        level: 'AAA',
        negative: '选择1',
        opinion: '选择2'
      }],
    }
  },
  methods:{
   
  }
}
</script>

<style lang="scss" scoped>
.credit_box {
  margin: 0 20px;
  background: #FFF;
  border: 1px solid #D4D8E5;
  stroke: #D4D8E5;
  filter: drop-shadow(0px 0px 8px rgba(224, 223, 238, 0.40));

  .credit_title {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 60px;
    border-bottom: 1px solid #D4D8E5;

    span {
      color: #000;
      font-family: Source Han Sans CN;
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }

  .credit_select_box {
    .credit_select {
      display: flex;
      align-items: center;
      margin-top: 25px;
      margin-left: 20px;
    }
  }

  .credit_table {
    margin: 12px 20px;
  }

  ::v-deep .cell {
    text-align: left !important;
  }
}
</style>