2021-01-21 element ui 树形结构 table

element ui 树形结构 table

项目需要使用树形结构的表格，利用分组字段为父级，展示所有的数据

---

数据处理：

在element ui 树形表格中，当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，所以在数据库查出数据以后在后台进行处理。

1. 运用java8的新特性，会比较便捷

 //测试
 //People对象是用有id、name（名字）、groupName（分组名称）、children（孩子）的对象
    public static void main(String[] args) {
         List<People> data = new ArrayList<>();
         data.add(new People(1,"张三","全员恶人"));
         data.add(new People(2,"李四","全员恶人"));
         data.add(new People(3,"哇哈哈","饮料"));
         data.add(new People(4,"纯牛奶","饮料"));
         data.add(new People(5,"一条鱼","大漂亮"));

        //利用java8新特性，获得所有的分组名称
        List<String> groupNames = data.stream().map(e->e.getGroupName()).distinct().collect(Collectors.toList());

        //将分组与数据对应，更好查找
        LinkedHashMap<String, People> resultLinkedMap = new LinkedHashMap<String, People>();

        List<People> resultData = new LinkedList<>();

        //将带有groupName的list 转化为TestObject对象
        groupNames.forEach(e->{
            People people = new People();
            people.setGroupName(e);
            people.setId(resultData.size()-groupNames.size()); //设置TestObject 的id
            resultData.add(people);
            resultLinkedMap.put(e, people);
        });

        //遍历原始数据 找到分组对应的对象，加入其Children
        data.forEach(a -> resultLinkedMap.get(a.getGroupName()).getChildren().add(a));

		//打印输出
        for (People resultDatum : resultData) {
            System.out.println(resultDatum.getGroupName() + "  Children are：");
            for (int j = 0; j < resultDatum.getChildren().size(); j++) {
                System.out.println(" " + resultDatum.getChildren().get(j));
            }
        }
    }

id 是在前台树形表格渲染的row-key，必须每一个对象都要有

处理后的效果：

---

前台展示：

前台获取数据时一定要是JSON对象，切记不能是数组，如果是数组不能识别无法渲染！

  <el-table ref="table"
                       v-loading="tableLoading"
                       size="small"
                       class="table-style"
                       :data="data"
                       border
                       highlight-current-row
                       @current-change="handleCurrentChange"
                       :span-method="objectSpanMethod"
                       default-expand-all
                       row-key="id"
                       :tree-props="{children: 'children', hasChildren:'hasChildren'}">
                       
<el-table-column align="left" clalss="setCenter" prop="groupName" label="分组名称" min-width="80" sortable resizable show-overflow-tooltip >   </el-table-column>

<el-table-column align="left" clalss="setCenter" prop="status" label="状态" min-width="80" sortable resizable show-overflow-tooltip></el-table-column>

<el-table-column align="left" clalss="setCenter" prop="remark" label="备注" min-width="80" sortable resizable show-overflow-tooltip></el-table-column>
 
  </el-table>

:span-method=“objectSpanMethod” 是合并列的作用

 objectSpanMethod({row,column,rowIndex,columnIndex}){
            if(row.name===null){//这边是name为判断条件是不是要合并列
              if (columnIndex === 0) {
                // 将第一列向右合并一格
                return [1, 9];
              } else if (columnIndex === 1) {
                // 删除第二列
                return [0, 0];
              }
            }else if (columnIndex === 0) {
              // 对第一列的数据进行行合并
              return {
                rowspan: 1,
                colspan: 1
              }
            }
          },

default-expand-all 是默认在加载时展开children。

row-key=“id” 是必须加上的，id不是一定的可以是其他String类型的值，但必须是在表格渲染的数据都要有的属性

---

前台展示：

注：此表格与上面的数据无关，但是流程和渲染效果是一样的

---

过程中踩过的坑

前台可能会报错：Error:for nested data item, row-key is required.

可能是一下原因之一：
1.前台获取数据时一定要是JSON对象，切记不能是数组，如果是数组不能识别无法渲染！
2.id可能会与element ui 中起冲突，建议改其他的名字

提示：网上有Error:for nested data item, row-key is required.的解决方法是，更改element ui 的版本号，我试过无效，还有加 hasChildren=true 也无效果。