vue3 element-table自定义表头和内容

使用vue3 element plus中el-table

表头数据与内容数据分开

表头数据

表格数据

关键代码

//根据列id对应表头id 显示数据
<el-table :data="pagination" style="width: 100%">
      <template v-for="(col, index) in hearder" :key="index">
        <el-table-column :label="col.colTitle" align="center">
          <template #default="scope"
            ><template v-for="item in scope.row" :key="item"
              >{{ item.templateColsId == col.id ? item.colValue : "" }}
            </template></template
          >
        </el-table-column>
      </template>
    </el-table>