vue-treeselect 实现懒加载远程模糊搜索支持多选，可悬浮提示选择项所有层级已封装为组件

今天实现一个客户单位组织树的功能，不限层级，数据量巨大，采用vue-treeselect 实现懒加载 + 远程搜索

这是vue+ iview组件 element的需要改一下tooltip的写法

这个支持对选择的单位全部层级进行悬浮提示（也无法在下面下拉回显，下拉需要触发懒加载，只有远程搜索才能回显层级）

代码详细解释：

tooltip 设置了最大宽度没有选择项或者下拉框弹开会disabled禁用

limit是多选展示的最大数量，我这里设置1个

:limitText="count => '更多' + count + '个'" 是 xxx 更多x个对提示文字修改

flat是多选时候不设置这个回显会把给出id的所有父级也勾选

multiple是多选

:class="{ treeClass: isEdit }" 这个是开始想通过设置placeholder 来回显层级，后面作废

:options="product_map" 下拉框的数据源

:appendToBody="appendToBody" 相当于transfer 把组件渲染到最外层，不受父级样式影响

:value-consists-of="valueConsistsOf" 选择后@select 方法获取的数据类型（id还是node层级）

:disabled="disabled" 禁用

:placeholder="placeholder" 默认提示语

:async="isAsync" 是否开启远程搜索模式

:load-options="isAsync ? asyncOptions : loadOptions" 懒加载和远程搜索触发的方法

:defaultExpandLevel="expandLevel" 默认展开的层级

:cacheOptions="false" 是否缓存搜索的数据这里缓存会有问题

v-model="checkRroduct" 绑定的数据id

一些为空的提示语

noChildrenText="没有数据"

noOptionsText="没有数据"

noResultsText="没有搜索结果"

控制打开搜索模式还是懒加载

@search-change="searchChange"

@keydown.native="treeKeydown($event)"

@keyup.native="treeKeyup($event)"

@open="itemopen"

@close="itemClose"

下拉选项的自定义展示处理

因为选项的每一项配置 disabled在远程搜索模式有问题，所以自己重写这个了

disabled是因为项目搜索后一些选项要禁用

（这个气死我了）写的破大防

[

{id: 151, group_id : "150,151"， group_name : "xxx,xxx" },

{id: 152, group_id : "150,151,152"， group_name : "xxx,xxx,xxx" },

{id: 162, group_id : "160,161,162" ， group_name : "xxx,xxx,xxx"},

]

如上数据 group_id 是父级到它本身我要把这个聚合为一条树，并且根据id去禁用上面的150,160,161 就需要禁用，也就是没有返回id和group_id 最后一位相同的选项

<div slot="option-label" slot-scope="{ node }">

<div :title="node.raw.label" v-if="node.raw.disabled" @click.prevent @click.stop :class="['labelClass', 'is-disabled']">

{{ node.raw.label }}

</div>

<div :title="node.raw.label" v-else class="labelClass">

{{ node.raw.label }}

</div>

</div>

选中项的自定义展示处理

<div slot="value-label" slot-scope="{ node }">{{ node.raw.longTitle }}</div>

接口讲解

queryTenantByLevel 传空查询所有一级客户传parent_id查询用户子级（懒加载使用）

queryTenantByLike 传 staff_id查询这个id的用户信息传company_name远程模糊搜索

方法讲解

handleEditTreeDataT 修改回显时候使用这个方法 handleEditTreeData是客户中心的特殊处理

handleEditTreeDataMuti 是多选的的回显

上面三个都做了权限控制，queryTenantByLevel返回空证明这个客户权限低，使用登录客户的staff_id请求数据

clear() 这个是对页面重置时候要调用的清空选择项 this.$refs.cusTree.clear()

initTreeData 是新增和页面条件查询时候用的

toSelectProduct 选中选项后触发这个方法，返回node层级

asyncOptions 远程搜索这里面做了一个时间控制，用户输入停止后1秒才会调接口而且这个有 bug，必须callback(null, []) 后才能正常搜索，我这里控制第一次搜索结果为空，存在问题，后续研究吧

loadOptions 懒加载方法

后端返回数据需要这些字段

company_name 客户单位的名称

group_id 顶级到当前级别的id 如果当前是一级这个取当前用户的id

group_name 顶级到当前级别的company_name拼接

parent_id 当前用户的父级id 这个结合handleEditTreeData 客户中心是新增修改父级客户

所以this.checkRroduct = formData.parent_id 其他地方是staff_id

staff_id 当前用户的id

如何调用

首先全局注册一下这个组件

新建js文件

import Vue from 'vue'

import CusTree from './vue-treeselect/index.vue'

Vue.component('CusTree', CusTree)

在查询条件里面使用

<FormItem>

<CusTree style="width: 200px;" ref="cusTree" placeholder="客户单位" type="A" @getCheckRroduct="getCheckRroduct"></CusTree>

</FormItem>

// 重置

resetData() {

this.$refs.cusTree.clear()

this.condition = JSON.parse(JSON.stringify(this.conditionInitCache))

this.queryData()

},

// 这个是获取 checkRroduct是id label是中文名（防止后端让你传中文搜索）

getCheckRroduct(formData) {

this.condition.customer_id = formData.checkRroduct // formData.label

},

在新增修改数据里面使用

type为A是新增其他类型需要在下面触发handleEditTreeDataT修改回显

queryTenantByLike传staff_id是查这个用户的具体信息

if (this.params.type == 'M') {

// console.log('params', this.params)

this.formValidate.customerId = this.params.customer_id

this.$http.operation.queryTenantByLike({ staff_id: this.formValidate.customerId }).then(resp => {

if (resp && resp.result_code == '0') {

this.$refs.cusTree.handleEditTreeDataT(resp.data[0])

} else {

this.$Message.error(resp.result_msg)

}

})

}

在多选时候