配置表头组件

<el-popover placement="bottom" :width="220" trigger="click">
    <template #reference>
      <span class="el-dropdown-link">
        <i class="el-icon-circle-plus-outline"></i>
        配置表头
      </span>
    </template>
    <div class="setting-table-header">
      <h4>配置表头</h4>
      <el-checkbox-group v-model="checkedCities">
        <div class="setting-table-header-list" v-for="(item, index) in gridData" :key="index">
          <el-checkbox @change="changeCheck" :label="item" :key="item.name">{{ item.name }}</el-checkbox>
        </div>
      </el-checkbox-group>
    </div>
  </el-popover>
<script lang="ts">

import { dynamicHeader } from '@/pages/chargingOrder/data/dataHeader'
import { defineComponent, reactive, onMounted, toRefs } from 'vue'
export default defineComponent({
  name: 'configure',
  emits: ['changeTableHeader'],
  setup: function (props, { emit }) {
    const data = reactive({
      gridData: dynamicHeader, // 需要动态配置的表头数据
      checkedCities: [],
    })
    const changeCheck = () => {
      emit('changeTableHeader', data.checkedCities)
    }
    onMounted(() => {
      emit('changeTableHeader', [])
    })
    return {
      ...toRefs(data),
      changeCheck,
    }
  },
})
</script>

接下来我们在父组件中接受下子组件的参数，进行设置

<template>
      <div>
        <Configure @changeTableHeader="settingTableHeader"></Configure>
        <el-table :data="dataList" v-loading="loading" style="width: 100%">
            <el-table-column
              v-for="item in combination"
              :width="item.width"
              :label="item.name"
              :key="item.name" >
                <template #default="{ row }">
                  <span>
                      {{ row[item.key] }}
                   </span>
                </template>
              </el-table-column>
         </el-table>
      </div>
</template>
<script lang="ts">
import { dataHeader, dynamicHeader } from '@/pages/chargingOrder/data/dataHeader'
import { defineComponent, reactive, toRefs, ref, nextTick } from 'vue'
import Configure from './Configure.vue'
export default defineComponent({
  name: 'orderTable',
  props: {
    dataList: {
      type: Array,
    },
    loading: Boolean,
  },
  model: {
    dataList: 'dataList',
  },
  setup: function () {
    const data: any = reactive({
      headerList: dataHeader, // 固定表头
      activeHeader: dynamicHeader, // 动态表头
      combination: [],
    })
    // 表头动态配置
    const settingTableHeader = (event: any) => {
      // 更新总表头
      data.combination = [...data.headerList, ...event]
    }
    const handleClose = () => {
      data.dialogVisible = false
    }
    return {
      ...toRefs(data),
      settingTableHeader,
    }
  },
})
</script>

注意：combination 表头遍历的时候一定绑定唯一的key，我看好多文章说样式错乱，也是key导致的。