elementui 动态表格

前端代码

<template>

<div class="root">
  <el-table
    :data="dataList"
    style="width: 100%"
    :fit='true'
    :default-sort="{prop: 'date', order: 'descending'}"
  >
    <el-table-column :prop="index" :label="item"  show-overflow-tooltip v-for="(item, index) in headerList"
                     :key="index">
    </el-table-column>
  </el-table>
</div>

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryParams.pageNum"
  :page-sizes="[10, 15, 20]"
  :page-size="queryParams.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

</template>

return{

dataList:[],
headerList:{}

}
后端对应格式

public class DataVo {
　　// 表头中存储 对应的key和要展示的名称 key与数据map中的key对应  eg： {name：姓名，birth：生日 }
    private Map header;
　　// 存储数据时候  key与表头的key对应  值为要展示的值 eg：[{name：张三，birth：2021-1-1}，{name：李四，birth：2022-1-1}]
    private List<Map> data;

    public Map getHeader() {
        return header;
    }

    public void setHeader(Map header) {
        this.header = header;
    }

    public List<Map> getData() {
        return data;
    }

    public void setData(List<Map> data) {
        this.data = data;
    }
}
参考：ElementUI table表格列动态渲染 - 云+社区 - 腾讯云 (tencent.com)