前端(一)Vue+Java实现动态表格展示

前端(一)Vue+Java实现动态表格展示

一、引言

        作者最近做的平台项目有个功能,展示数据执行结果,实际上就是要展示多个表格,但是表格的数量、行、列都是不固定的,相当于要做一个通用化的表格展示。

二、实现

1、数据结构

        首先要理一下数据结构,从前端思考还是后端思考呢?前端。

        因为数据是用来给前端展示的,所以必须要前端的掩饰支持这个结构的展示。

        多表格可以使用v-for进行遍历,行数据绑定:data="table.data",这个data得是键值对,列名相当于在这个表格中有一个string集合作为表头,v-for="(column, columnIndex) in table.columns"

2、前端

<div>
            <div :style="{'max-height': this.timeLineHeight +'px'}" class='add-card2' id="main4"
                 style="overflow-y:scroll;">
                <div style="overflow-y:scroll;" v-if="tables !== '' && tables.length > 0"
                     v-for="(table, index) in tables" :key="index">
                    <span style='font-weight: bold;font-size: 16px;margin-bottom: 10px'
                          v-if="tables !== '' && tables.length > 0 && table.status != ''">状态:{{ table.status}}</span>
                    <span style='font-weight: bold;font-size: 16px;margin-bottom: 10px'
                          v-if="tables !== '' && tables.length > 0 && table.desc != ''&& table.desc != null">描述:{{ table.desc
                        }}</span>
                    <div v-if="table.data !== '' && table.data.length > 0" style="height: 250px; overflow: auto;">
                        <el-table
                                @row-click="handleClickChange"
                                :row-class-name="tableRowClassName"
                                :highlight-current-row="false"
                                :header-cell-style="{
                                    color: '#fff',
                                    background: '#0a3370',
                                    fontWeight: '700',
                                  }"
                                :data="table.data">
                            <el-table-column v-for="(column, columnIndex) in table.columns" :key="columnIndex"
                                             :prop="column.prop" :label="column.label"></el-table-column>
                        </el-table>
                    </div>
                </div>

            </div>
        </div>

2、后端

        先看一下结构

@Data
public class TableResponse {
    // 行数据
    private List<HashMap> rows;
    // 列名
    private List<ColumnResponse> columns;
}

@Data
public class ColumnResponse {
    // 列名
    private String label;
    // 列对应的行键
    private String prop;

}

        组装数据,这里是取出来数据库的元数据,所以解析之后本来就是HashMap,如果是List对象还要多一个处理步骤

public Response table(TableRequest request) { 
        // sql取元数据dataList
        List<TableResponse> tableResponseList = new ArrayList<>();
        for (Data da : dataList) {
            TableResponse table = new TableResponse();
            tableResponseList.add(table);
            if (CollectionUtilsExt.isBlank(da.getData())) {
                continue;
            }
            List<ColumnResponse> columns = new ArrayList<>();
            table.setColumns(columns);
            da.getData().get(0).forEach((key, v) -> {
                ColumnResponse temp = new ColumnResponse();
                temp.setLabel(String.valueOf(key));
                temp.setProp(String.valueOf(key));
                columns.add(temp);
            });
            table.setData(stepBo.getData());
        }
        Response response = new Response();
        response.setTableResponseList(tableResponseList);
        return response;
    }

        List<A>对象解析成表格

public Response table(TableRequest request) { 
        // 调用接口或者mybatis取数据list
        List<Map<String, String>> dataList = transferMap(list);
        List<TableResponse> tableResponseList = new ArrayList<>();
        for (Data da : dataList) {
            TableResponse table = new TableResponse();
            tableResponseList.add(table);
            if (CollectionUtilsExt.isBlank(da.getData())) {
                continue;
            }
            List<ColumnResponse> columns = new ArrayList<>();
            table.setColumns(columns);
            da.getData().get(0).forEach((key, v) -> {
                ColumnResponse temp = new ColumnResponse();
                temp.setLabel(String.valueOf(key));
                temp.setProp(String.valueOf(key));
                columns.add(temp);
            });
            table.setData(stepBo.getData());
        }
        Response response = new Response();
        response.setTableResponseList(tableResponseList);
        return response;
    }

public HashMap transferMap(List<A> list) {
    List<Map<String, String>> resultList = new ArrayList<>();
        for (A a : list) {
            Map<String, String> map = new HashMap<>();
            Field[] fields = a.getClass().getDeclaredFields();
            for (Field field : fields) {
                field.setA***essible(true);
                try {
                    String fieldName = field.getName();
                    Object fieldValue = field.get(a);
                    map.put(fieldName, fieldValue.toString());
                } catch (IllegalA***essException e) {
                    e.printStackTrace();
                }
            }
            resultList.add(map);
        }
}

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端(一)Vue+Java实现动态表格展示

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买