Vue+Java实现动态表格展示

一、引言

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

二、实现

1、数据结构

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

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

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

2、前端

            

                

                    状态：{{ table.status}}
                    描述：{{ table.desc
                        }}
                    

                        
                            
                        
                    
                

            
        

2、后端

        先看一下结构

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

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

}

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

public Response table(TableRequest request) { 
        // sql取元数据dataList
        List tableResponseList = new ArrayList<>();
        for (Data da : dataList) {
            TableResponse table = new TableResponse();
            tableResponseList.add(table);
            if (CollectionUtilsExt.isBlank(da.getData())) {
                continue;
            }
            List 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对象解析成表格

public Response table(TableRequest request) { 
        // 调用接口或者mybatis取数据list
        List> dataList = transferMap(list);
        List tableResponseList = new ArrayList<>();
        for (Data da : dataList) {
            TableResponse table = new TableResponse();
            tableResponseList.add(table);
            if (CollectionUtilsExt.isBlank(da.getData())) {
                continue;
            }
            List 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 list) {
    List> resultList = new ArrayList<>();
        for (A a : list) {
            Map 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);
        }
}

三、总结

        小功能，没啥好说的。