vue3+quasar tree树结构的展开以及自定义过滤

最新推荐文章于 2024-09-12 10:03:29 发布

小瓶子

最新推荐文章于 2024-09-12 10:03:29 发布

阅读量2.5k

点赞数 1

分类专栏： quasar 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44876807/article/details/123599927

版权

quasar 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现功能：

点击树节点可以获取节点的信息，并在左侧表单进行编辑；同时点击时进行节点的展示与折叠。
过滤父节点时同时展示子节点内容

在这里插入图片描述

    <q-input
        ref="filterRef"
        filled
        v-model="filter"
        label="过滤节点"
        class="filterInput"
      >
        <template v-slot:append>
          <q-icon
            v-if="filter !== ''"
            name="clear"
            class="cursor-pointer"
            @click="resetFilter"
          />
        </template>
      </q-input>
    <q-tree
        :nodes="nodesTree"
        node-key="id"//包含唯一节点id的每个节点对象的属性名
        :filter="filter"
        :filter-method="myFilterMethod"
        selected-color="primary"
        v-model:selected="selected"//当前所选节点的键
        @update:selected="treeSelect"//当所选节点更改时发出
        accordion//允许将树设置为手风琴模式
        ref="treeRef"
        label-key="label"//包含节点标签的每个节点对象的属性名
        class="treelist"
      >
    </q-tree>
	setup() {
		const filter = ref('');
		const selected = ref('');
		//获取tree的ref
        const treeRef = ref();
        const filterIds = ref(null);
      
     return xxxx
	}

setExpanded 可以设置节点是否展开
在这里插入图片描述
getNodeByKey获取了节点的具体内容

保存上次点击key是因为加了selected有了选中和被选中的状态，不会点击展开再点击折叠了，就加了判断，当取消选择节点时折叠上次选中的节点。

 const treeSelect = () => {
      isEdit.value = true;
      const tree = treeRef.value;
      list = tree.getNodeByKey(selected.value);
      // 保存上次点击的节点key
      if (selected.value != null) {
        oldSelectKey.value = selected.value;
      }
      if (JSON.stringify(list) != "{}" && list != undefined) {
        tree.setExpanded(selected.value,true,);
      }else{
        tree.setExpanded(oldSelectKey.value,false,);
      }
      addDis.value = true;
      setForm(list);
    };

过滤时默认筛选父节点是不展示子节点的信息的。通过子节点的父id和父节点的id进行判断。

 //过滤的自定义方法        
        const myFilterMethod = (node, filter) => {
            会对当前的每条Node进行一次过滤
      		const filt = filter;
      		if (!filt) return true
      		if (node.label && node.label.indexOf(filt) > -1 ) {
        		filterIds.value = node.id
      		}
     		 return node.label && node.label.indexOf(filt) > -1 ||node.parent == filterIds.value
    		};