一、简单介绍

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  
    };
  }
}