配置表頭組件

<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, // 需要?jiǎng)討B(tài)配置的表頭數(shù)據(jù)
      checkedCities: [],
    })
    const changeCheck = () => {
      emit('changeTableHeader', data.checkedCities)
    }
    onMounted(() => {
      emit('changeTableHeader', [])
    })
    return {
      ...toRefs(data),
      changeCheck,
    }
  },
})
</script>

接下來我們?cè)诟附M件中接受下子組件的參數(shù)柒昏，進(jìn)行設(shè)置

<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, // 動(dòng)態(tài)表頭
      combination: [],
    })
    // 表頭動(dòng)態(tài)配置
    const settingTableHeader = (event: any) => {
      // 更新總表頭
      data.combination = [...data.headerList, ...event]
    }
    const handleClose = () => {
      data.dialogVisible = false
    }
    return {
      ...toRefs(data),
      settingTableHeader,
    }
  },
})
</script>

注意：combination 表頭遍歷的時(shí)候一定綁定唯一的key，我看好多文章說樣式錯(cuò)亂，也是key導(dǎo)致的延窜。