关于vue-treeselect使用方法

项目场景：新增物料属于种类包含子节点，单纯的select组件不够使用

问题描述

vue-treeselect的文档是英文版，对于前端初学者不算友好

vue-treeselect官网

vue-treeselect使用流程

npm install --save @riophae/vue-treeselect                      npm下载组件

import Treeselect from "@riophae/vue-treeselect";           应用页面导入组件

import "@riophae/vue-treeselect/dist/vue-treeselect.css";       应用页面导入样式

vue-treeselect组件属性

（正常使用）

<Treeselect

                :disabled="readonly"

                v-model="equipmentTypeId"

                style="width: 320px"

                placeholder="设备类型"

                noChildrenText="暂无数据"

                noOptionsText="请先选择采购方式"

                noResultsText="暂无匹配项"

                loadingText="数据加载中"

                :multiple="false"

                @select="handleSelect"

                :options="optionsTree"

                :normalizer="normalizer"

                @input="change"

              />

（在table-column中使用建议按下操作，避免操作同一数据） 

 <Treeselect

                v-model="scope.row.equipmentTypeId"      //这里是绑定的值，也就是选中值

                style="width: 320px"

                placeholder="设备类型"           //默认展示文本

                noChildrenText="暂无数据"      //子节点数据为空时展示文本

                noOptionsText="请先选择采购方式"   //组件数据为空或者null时展示文本

                noResultsText="暂无匹配项"    //搜索展示文本

                loadingText="数据加载中"      //数据加载展示文本

                :multiple="false"      //是否多选

                @select="handleSelect"  //选中事件 回调函数里面的参数代表着选中节点的属性

                :options="scope.row.optionsTree"  //树形下拉菜单选项的数据源

                :normalizer="normalizer"    //自定义展示字段，把自己要展示的赋予组件固定展示的字段

                @input="change"   //选中事件，俩个参数，一个是选中项绑定的id，另一个未知

  />

           

                append-to-body      //当下拉框被其他组件遮挡时的处理方法

                z-index="9000"   

           

normalizer声明在data中，用函数的方法展示

normalizer(node) {

        return {

       id: node.equipmentTypeId, //   （这里是选中时的值）

       label: node.equipmentName, //   （这里是选中时你要展示的文本）

        };

      },

vue-treeselect在使用单选多选的注意点

当绑定的multiple属性bol值为false时，当前为单选模式，组件v-model默认值要为null，否则组件会默认展示unknow。这里input事件中的第一参数是string类型

当绑定的multiple属性bol值为true时，当前为多选模式，组件v-model默认值要为空数组，否则组件会默认展示unknow。这里input事件中的第一参数是arrary类型