vue +elementUI实现动态表格（表头也是动态）

最新推荐文章于 2024-08-15 23:24:24 发布

陆仁丶

最新推荐文章于 2024-08-15 23:24:24 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： javascript java vue elementui

本文链接：https://blog.csdn.net/kk12138123/article/details/119209101

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

本文介绍了如何在前端使用Element UI的el-table组件动态显示数据，通过V-for遍历后端返回的GZTitleModel表头和tableData。后端定义了包含label和property属性的表头实体，并通过Java映射到前端。

摘要由CSDN通过智能技术生成

废话不多说直接上代码

前端页面调用

<el-table :data="tableData" highlight-current-row style="width: 100%;margin-top: 30px; ">
        <el-table-column
          v-for="(item,index) in cols"
          :key="index"
          :label="item.label"
          :property="item.property"
          align="center">
          <template slot-scope="scope">{{ scope.row[scope.column.property] }}</template>
        </el-table-column>
      </el-table>

后端定义表头实体

public class GZTitleModel {
    private String label;
    private String property;

    public String getLabel() {
        return label;
    }

    public void setLabel(String label) {
        this.label = label;
    }

    public String getProperty() {
        return property;
    }

    public void setProperty(String property) {
        this.property = property;
    }
}

后端返回数据

        Map<String, List> returnMap = new HashMap<>();
        List cols = new ArrayList();
        List<Map<String, Object>> tableData = new ArrayList();
        LGTitleModel lts = new LGTitleModel();
        lts.setLabel("姓名");
        lts.setProperty("xm");
        cols.add(lts);
        Map map = new HashMap();
        map.put("xm", "张三");
        tableData.add(map);
        returnMap.put("cols", cols);
        returnMap.put("tableData", tableData);
        return returnMap;