lycHub/vue-virtual-tree

可以提供一个搜索功能吗?

Closed this issue · 4 comments

可以提供一个搜索功能吗?虚拟树本来就是为了处理大量数据的渲染,不支持搜索不合适

我周末看看

banls commented

国产的垃圾源码 用都用不了。狗才用

国产的垃圾源码 用都用不了。狗才用

别人都能用,就你个fw不会,还好意思来bibi ??
请你写个不垃圾的我欣赏下? 菜就算了还没点觉悟,再免费给你普及下咋用的,看好了zz

<template>
  <button @click="selectedNode">获取选中节点</button>
  <vir-tree
    ref="virTree"
    :source="list"
    :default-disabled-keys="defaultDisabledKeys"
    :default-selected-key="defaultSelectedKey"
    :default-expanded-keys="defaultExpandedKeys"
  />
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import {TreeInstance, TreeNodeOptions, VirTree} from "vue-virtual-tree";

  function recursion(path = '0', level = 3): TreeNodeOptions[] {
    const list = [];
    for (let i = 0; i < 10; i += 1) {
      const nodeKey = `${path}-${i}`;
      const treeNode: TreeNodeOptions  = {
        nodeKey,
        name: nodeKey,
        children: [],
        hasChildren: true
      };

      if (level > 0) {
        treeNode.children = recursion(nodeKey, level - 1);
      } else {
        treeNode.hasChildren = false;
      }

      list.push(treeNode);
    }
    return list;
  }
  export default defineComponent({
    name: 'App',
    components: { VirTree },
    setup() {
      const list = ref<TreeNodeOptions[]>([]);
      const virTree = ref<TreeInstance | null>(null);
      const defaultExpandedKeys = ref(['0-0', '0-1', '0-1-0']);
      const defaultSelectedKey = ref('0-0-1-0');
      const defaultDisabledKeys = ref(['0-0-1']);

      onMounted(() => {
        list.value = recursion();
      });
      const selectedNode = () => {
        const node = virTree.value!.getSelectedNode();
        console.log('selected node', node);
      }
      return {
        list,
        virTree,
        selectedNode,
        defaultExpandedKeys,
        defaultSelectedKey,
        defaultDisabledKeys
      }
    }
  });

</script>

参考 #12