vue3 Element-UI封装实现TreeSelect 支持搜索功能

前些天实现了一个树结构的下拉组件,可最近又让我支持下拉搜索功能,查了一圈没有找到合适的,只好今天自己写了一下,凑合能用吧,支持搜索功能了最起码,可有些参数还是要配置的




使用起来比之前那一篇麻烦了一丢丢,相对还是好用的
且看,


   

在父组件里我们组要把对应要修改的value传进去,options对应树结构的array模样,不过一定要有value的,或者读者可以自己再稍微改改,emit出来的参数。
关于el-popover的宽度和高度都没有做设置,不适合过多的数据,需要的话就自己加个div限制一下,或者需要的人多的话,我再把它优化下。。

const selectData = ref("");
    const options = ref([
      {
        label: "选项1",
        value: "1",
        children: [{ label: "选项1-1", value: "1-1" }],
      },
      { label: "选项2", value: "2" },
    ]);
    function handleSelect(node) {
      console.log(node);
    }

有哪里需要优化的提一下,持续改进哈。

你可能感兴趣的:(vue3 Element-UI封装实现TreeSelect 支持搜索功能)