更新记录

1.0.1（2023-08-11） 下载此版本

树形可搜索组件

简介

• 本项目使用uni_ui项目，涉及到uni-easyinput插件，可自行安装，树形可搜索组件可搭配弹窗使用，也可以手动修改插件内展示方式变为页面树形组件，树形组件的数据格式都是相同的嵌套数据，

平台兼容性

树形可搜索组件

简介

• 本项目使用uni_ui项目，涉及到uni-easyinput插件，可自行安装，树形可搜索组件可搭配弹窗使用，也可以手动修改插件内展示方式变为页面树形组件，树形组件的数据格式都是相同的嵌套数据，可参考下面数据格式

• 注意：必须有id、name(id可通过valueKey来配置为其它键值，如value)字段，且唯一

• demo仓库：https://github.com/flexyw/tree-search.git

• 项目截图 : 在static文件下的项目截图.png https://github.com/flexyw/tree-search/blob/main/static/%E6%8F%92%E4%BB%B6%E6%88%AA%E5%9B%BE.png

• 

  let list = [
  {
      "id":"4c4bf47d76",
      "name":"美团",
      "children":[
          {
              "id":"SC-45393",
              "name":"北林区民和街1311号宜宾咨美化妆品公司"
          }]
  },
  {
      "id":"ae22a83a0c",
      "name":"饿了么",
      "children":[
          {
              "id":"SC-45391",
              "name":"天天向上公司"
          }]
  },
  {
      "id":"ae22a83a0c55",
      "name":"朴朴",
      "children":[
          {
              "id":"SC-4539122",
              "name":"日不落美化妆品公司"
          },
          {
              "id":"SC-4895122",
              "name":"人工牛黄公司"
          }]
  }
  ]

使用方法

在 script 中引入组件

    import treeSearch from "@/components/tree-search/tree-search.vue"
    export default {
        components: {
            treeSearch
        }

在 template 中使用组件

     <tree-search ref="treePicker" :multiple='true' title="选择系统/门店" @select-change="selectChangeList"
      @iconClickChange="iconClickChange" @cancel="cancel" :localdata="listData" valueKey="value" textKey="label"
      children="children" />

在 script 中定义打开方法，成功回调，取消回调，数据搜索展示

        methods: {
            // 打开树形组件
            showPicker() {
                this.$refs.treePicker.show();
            }，
        }

数据搜索处理方法fuzzySearch

      // 模糊搜索数据进行展示
      fuzzySearch(value, list) {
        let filteredList = [];
        for (let item of list) {
          let filteredItem = {
            id: item.id,
            name: item.name,
            children: []
          };
          if ((item.id.includes(value) || item.name.includes(value)) && !this.isDuplicate(item, filteredList)) {
            filteredItem.children = item.children;
            filteredList.push(filteredItem);
          }
          if (item.children && item.children.length > 0) {
            let filteredChildren = this.fuzzySearch(value, item.children);
            filteredItem.children = this.mergeChildren(filteredItem.children, filteredChildren, filteredList);
            if (filteredItem.children.length > 0 && !this.isDuplicate(item, filteredList)) {
              filteredList.push(filteredItem);
            }
          }
        }
        return filteredList;
      },
      // 辅助函数判断当前节点是否在过滤后的列表中已存在
      isDuplicate(item, filteredList) {
        for (let filteredItem of filteredList) {
          if (filteredItem.id === item.id) {
            return true;
          }
        }
        return false;
      },
      // 辅助函数合并子节点
      mergeChildren(originalChildren, filteredChildren, filteredList) {
        let mergedChildren = [];

        for (let child of originalChildren) {
          if (!this.isDuplicate(child, filteredList)) {
            mergedChildren.push(child);
          }
        }

        for (let child of filteredChildren) {
          if (!this.isDuplicate(child, mergedChildren) && !this.isDuplicate(child, filteredList)) {
            mergedChildren.push(child);
          }
        }
        return mergedChildren;
      },

在 template 中调用打开

     <button type="default" plain="true" @click="showPicker">打开树形搜索组件弹窗</button>

属性

方法