前端（一）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.setAccessible(true);
                try {
                    String fieldName = field.getName();
                    Object fieldValue = field.get(a);
                    map.put(fieldName, fieldValue.toString());
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                }
            }
            resultList.add(map);
        }
}