vue如何通过ref判断是否存在class类名_vue表格树状结构的实现

最新推荐文章于 2024-07-20 23:06:04 发布

weixin_39610807

最新推荐文章于 2024-07-20 23:06:04 发布

阅读量1.6k

点赞数

文章标签： vue如何通过ref判断是否存在class类名 vue自定义组件递归实现树状

本文介绍如何在Vue中通过自定义组件实现表格的树状结构，强调了数据转换和平级数据列表的重要性。讲解了如何利用Element UI库处理数据结构，创建map对象以方便操作自定义字段，并实现展开收起、上下移排序等功能。通过添加isOpen和isShow字段控制节点的显示和隐藏，同时利用rowNone类名进行显示隐藏控制。

摘要由CSDN通过智能技术生成

这绝对是我最后一次写树状结构，我非常的确定一定以及肯定！上一篇文章总结了 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 不会一直监听数据的变化，而