element 后台管理系统 实现el-table表头动态配置

效果图

<template>
  <div class="app-container">

    <!-- 查询结果 -->
    <div class="newTable">
      <div class="newTableCss">
        <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.id" :key="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
        <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
          highlight-current-row>

          <el-table-column align="center" fixed="left" label="序号" type="index" />
          <el-table-column align="center" v-for="header in headersList" :key="header.prop" :prop="header.prop"
            :label="header.label" v-if="header.visible">
            <template slot-scope="scope">
              <span v-if="header.prop=='roleId'">{{ formatRole(scope.row.roleId) }}</span>
              <!--特殊数据处理 -->
              <span v-else>{{ scope.row[header.prop] }}</span>
            </template>

          </el-table-column>



          <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>



  export default {
    name: "Admin",
    data() {
      return {
        list: [
          {
            "id": 5,
            "storeId": 0,
            "accountNumber": "admin0",
            "username": "Tracy123",
            "mobile": "13082243090",
            "avatar": null,
            "roleId": 1,
            "createTime": "2024-03-04 14:00:57",
            "createUser": 1,
            "updateTime": "2024-07-22 14:03:36",
            "updateUser": 1
          },
          {
            "id": 7,
            "storeId": 0,
            "accountNumber": "geng",
            "username": "耿",
            "mobile": "13644087301",
            "avatar": null,
            "roleId": 1,
            "createTime": "2024-05-16 09:15:53",
            "createUser": 1,
            "updateTime": "2024-07-05 13:57:37",
            "updateUser": 1
          }],

        roleOptions: [{
          "id": 1,
          "storeId": 0,
          "name": "管理员",
          "createTime": "2024-02-28 14:40:30",
          "createUser": 1,
          "updateTime": "2024-03-04 14:00:32",
          "updateUser": 1,
          "detail": "测试"
        },
        {
          "id": 3,
          "storeId": 0,
          "name": "测试",
          "createTime": "2024-07-05 13:53:38",
          "createUser": 7,
          "updateTime": "2024-07-05 13:53:38",
          "updateUser": 7,
          "detail": "测试"
        },
        {
          "id": 5,
          "storeId": 0,
          "name": "测试sun",
          "createTime": "2024-07-23 14:34:37",
          "createUser": 1,
          "updateTime": "2024-07-23 14:34:37",
          "updateUser": 1,
          "detail": "123"
        }
        ],
        listLoading: false,
        headersList: [
          { prop: 'accountNumber', label: '管理员账号' },
          { prop: 'roleId', label: '管理员角色' },
          { prop: 'username', label: '管理员姓名' },
          { prop: 'mobile', label: '管理员电话' },
          { prop: 'createTime', label: '创建时间' },
        ],
        cityOptions: ['accountNumber', 'roleId', 'username', 'mobile', 'createTime'],//全选
        checkAll: false,
        checkedCities: ['accountNumber', 'roleId'],//默认选中
        cities: [{ name: '管理员账号', id: 'accountNumber' }, { name: '管理员角色', id: 'roleId' },
        { name: '管理员姓名', id: 'username' }, { name: '管理员电话', id: 'mobile' }, { name: '创建时间', id: 'createTime' }],
        isIndeterminate: true
      };
    },
    created() {
      this.getHeaders()
    },
    methods: {
      formatRole(roleId) {
        for (let i = 0; i < this.roleOptions.length; i++) {
          if (roleId === this.roleOptions[i].id) {
            return this.roleOptions[i].name;
          }
        }
        return "";
      },



      getHeaders() {
        var that = this
        that.headersList.forEach(item => {
          if (that.checkedCities.indexOf(item.prop) > -1) {
            item.visible = true;
          } else {
            item.visible = false;
          }
        })
        that.$forceUpdate();
        console.log('that.headersList', that.headersList)

      },
      handleCheckAllChange(val) {
        this.checkedCities = val ? this.cityOptions : [];
        this.isIndeterminate = false;
        this.getHeaders()
      },
      handleCheckedCitiesChange(value) {
        console.log('value', value)
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        this.getHeaders()

      }
    }
  };
</script>