element表格多列排序_vue表格树状结构的实现

这绝对是我最后一次写树状结构，我非常的确定一定以及肯定！ 上一篇文章总结了 vue树状目录组件，忘记的可以点击传送门回顾一下： vue目录树组件

还是这个目录树，改版成 表格树状结构 。

我这里采用的UI库是Element，库自带了一种实现方式：

但是这种自带的实现方式，可扩展性很差，就很low，而且这样偷懒会让自己的技术止步不前，心里不安呀。

首先明确实现逻辑，表格树状结构中所谓的树状，并不是数据结构上的树状，只是布局上的效果而已，这里要求的数据结构是平级的数据列表。

还是上篇文章中说的，后端直接返回树状结构数据。

所以这里需要对数据处理一下，将树状结构的数据转换成平级的。getTreeList 方法中调用接口先获取到后端数据。

getTreeList() {
        this.treeList = [];    Catalog.getListByParent(this.catalogId).then((res) => {
        if (res.status === 0) {
            const treeList = res.data || [];        const tableList: ITree[] = [];        this.setCatalogList(tableList, treeList);        this.treeList = treeList;        this.tableList = tableList;    }  });},

这里有个需要注意的点，接口返回的数据并没有直接赋给 this.treeList ，因为直接赋值之后 vue 不会一直监听数据的变化，而