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里，换汤不换药。

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