pms-iot-vue/src/components/DailyTableColumn/index.vue

<template>
  <template v-for="(col, index) in columns" :key="index">
    <el-table-column v-if="col.children" :label="col.label" align="center">
      <template v-for="(child, childIndex) in col.children" :key="childIndex">
        <el-table-column v-if="child.isTag" v-bind="child" align="center" resizable>
          <template #default="scope">
            <dict-tag :type="child.dictType!" :value="scope.row[child.prop!]" />
          </template>
        </el-table-column>
        <el-table-column v-else v-bind="child" align="center" resizable />
      </template>
    </el-table-column>
    <el-table-column v-else-if="col.isTag" v-bind="col" align="center" resizable>
      <template #default="scope">
        <dict-tag :type="col.dictType!" :value="scope.row[col.prop!]" />
      </template>
    </el-table-column>
    <el-table-column v-else v-bind="col" align="center" resizable />
  </template>
</template>

<script setup lang="ts">
defineOptions({
  name: 'DailyTableColumn'
})

interface ColumnProps {
  label: string
  prop?: string
  children?: ColumnProps[]
  isTag?: boolean
  dictType?: string
  [key: string]: any
}

const props = defineProps<{
  columns: ColumnProps[]
}>()

const { columns } = toRefs(props)
</script>