Vue3+ElementPlus 实现动态多级表头

1. 动态表头
2. 多级表头

<el-table :data="tableDatatest" border style="width: 100%" >
  <el-table-column :label="item.label" v-for="item in tableHeader" :prop="item.value">
    <template v-if="item.children">
      <el-table-column :label="childitem.label" v-for="childitem in item.children" :prop="childitem.value"></el-table-column>
    </template>
  </el-table-column>
</el-table>
<script>
const tableDatatest = ref([])
const tableHeader = ref([])
// 数据渲染表头
tableHeader.value = [
  {
    label:'姓名',
    value:'userName',
  },
  {
    label:'课程',
    value:'course',
    children:[
      {
        label:'数学',
        value:'mathematics',
      },
      {
        label:'英语',
        value:'english',
      },
    ]
  },
  {
    label:'性别',
    value:'gender',
  },
]
// 数据渲染表格
tableDatatest.value = [
  {
    userName:'小明',
    mathematics:'92',
    english:'95',
    gender:'男',
  },
  {
    userName:'丽丽',
    mathematics:'93',
    english:'100',
    gender:'女',
  },
]
</script>