Vue+Element-Ui简单实现动态生成的表格

顾名思义 就是根据后端传回来的数据 前端来生产不同表头的表格来表现数据；

前端代码如下：

<el-table
:data="tableData"
:height="tableHeight"
:table-loading="tableLoading"
border
:stripe="true"
:highlight-current-row="true"
@refresh-change="refreshChange"
:header-cell-style="{color:'black'}"

>


<el-table-column
type="index"
label="序号"
:show-overflow-tooltip="true"
fixed
>
</el-table-column>
<template v-for="(col,index) in cols">
<el-table-column
:key="index"
:prop="col.prop"
:label="col.label"
:width="col.width"
:show-overflow-tooltip="true"
:sortable="col.sortable"
sortable
>
</el-table-column>
</template>

</el-table>

----------------------------------------------------------------------------------------------------------------------------------------------------------------

export default {
data() {
return {

cols: [{ prop: "eg", label: "请选择查询" }],
tableData: [],
};
},
mounted() {
searchChange() {
//先发出表头的请求
this.GeteHead();
//请求数据
this.querydata();
},
}

前端绑定一个搜索按钮，一次请求两个接口

分别请求表头 和  数据；

响应数据就是正常返回数据；

后端在响应表头数据的时候 保证传回正确格式就行

eg：

*1 写死固定数量的表头

try {
if (model.getQueryType().equals("0")) {
List<PubSysCheckHeadModel> list = new ArrayList<>();
list.add(new PubSysCheckHeadModel("job", "Job"));
list.add(new PubSysCheckHeadModel("what", "What"));
list.add(new PubSysCheckHeadModel("lastDate", "LastDate"));
list.add(new PubSysCheckHeadModel("nextDate", "NextDate"));
list.add(new PubSysCheckHeadModel("interval", "Interval"));
return new PageJson(list);
}else if (model.getQueryType().equals("1")) {
List<PubSysCheckHeadModel> list = new ArrayList<>();
list.add(new PubSysCheckHeadModel("triggerName", "TriggerName"));
list.add(new PubSysCheckHeadModel("tableName", "TableName"));
list.add(new PubSysCheckHeadModel("status", "Status"));
list.add(new PubSysCheckHeadModel("triggeringEvent", "TriggeringEvent"));
return new PageJson(list);
}else if ... ...

*2 在1的基础上，去数据库查，再填入到list里，换汤不换药。

每次请求都会不断的填充前端容器，达到所谓动态效果。

其实总体来说就是通过一次发送两个请求得到两组数据罢了，记得在每次请求前清空容器或者给个加载的样式。