一、简单介绍

vue-treeselect 是一个多选组件,具有对 Vue.js嵌套选项支持

  • 支持嵌套选项的单选和多选
  • 模糊匹配
  • 异步搜索
  • 延迟加载(仅在需要时加载深度选项的数据)
  • 键盘支持(使用Arrow Up & Arrow Down键导航,使用键选择选项Enter等)
  • 丰富的选项和高度可定制的
  • 支持 多种浏览器

需要Vue 2.2+

具体样式展示:

 

二、安装及使用

2.1、安装

npm install --save @riophae/vue-treeselect

2.2、引入组件和样式

import treeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

2.3、注册

components: {
   treeSelect
},

2.4、使用

<treeSelect v-model="value"
            :options="options"
            :show-count="true"
            :normalizer="normalizer"
            placeholder="please select……" />
data() {
   return {
      // define the default value
      value: null,
      // define options
      options: [{
         id: 'a',
         label: 'a',
         children: [{
           id: 'aa',
           label: 'aa'
         }, {
           id: 'ab',
           label: 'ab'
         }],
        }, {
          id: 'b',
          label: 'b'
        }, {
          id: 'c',
          label: 'c'
        }]
      },
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,  //自定义id
          label: node.label,  //自定义label
          children: node.children && node.children.length > 0 ? node.children: 0  //处理children,当children为[]或null时,子节点会展示No sub-options,一般子节点不需要展示这个,所以这样处理
        };
      }
    }
}

三、遇到的问题及解决方法

3.1、后台返回的数据格式不是标准的,即没有id和label

解决方法:增加normalizer属性,将id和label字段转换,比如部门接口返的数据是deptId和deptName,需要做如下处理

normalizer(node) {
  if (node.children && !node.children.length) {
     delete node.children;
  }
  return {
     id: node.deptId,  //自定义id
     label: node.deptName,  //自定义label
  }
}

3.2、叶子结点不期望展示下拉角标和提示文字(No sub-options)

 

原因分析:是由于children[ ]null 造成的

解决方法children[ ]或null时,将children删除,可以自己写方法遍历删除,也可以在normalizer中处理。以下是最简单的处理方法:

normalizer(node) {
  if (node.children && !node.children.length) {
    delete node.children;
  }
  return {
    id: node.id,  //自定义id
    label: node.label,  //自定义label
    //处理children,当children为[]或null时,子节点会展示No sub-options,一般子节点不需要展示这个,所以将children置为0
    children: node.children && node.children.length > 0 ? node.children: 0  
    };
  }
}

Logo

前往低代码交流专区

更多推荐