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

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

代码老祖

2486人浏览 · 2024-04-26 16:18:51

代码老祖 · 2024-04-26 16:18:51 发布

2024-9-2 最新修改，后端接口增加返回字段 hasChildren 避免没有子节点的仍需要点击下拉发懒加载请求。直接看文章结尾的完整代码。

再次声明使用方式
查询条件及弹框新增时候 type是A

<CusTree style="width: 100%;" ref="cusTree" placeholder="客户单位" :type="params.type" @getCheckRroduct="getCheckRroduct"></CusTree>

弹框修改时候 type是M 且要加回显代码

 if (this.params.type === 'M') {
      this.formData = JSON.parse(JSON.stringify(this.params.data))
      this.formData.projectTime = this.$moment(this.formData.projectTime).format('YYYY-MM-DD')
      if (this.formData.customerId) {
        this.$http.operation.queryTenantByLike({ staff_id: this.formData.customerId }).then(resp => {
          if (resp && resp.result_code == '0') {
            this.$refs.cusTree.handleEditTreeDataT(resp.data[0])
          } else {
            this.$Message.error(resp.result_msg)
          }
        })
      }
    }

下拉选择后触发回显

getCheckRroduct(formData) {

this.formData.customerId = formData.checkRroduct // 中文是label id是checkRroduct

},

重置

resetData() {

this.$refs.cusTree.clear()

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

this.queryData()

},

今天实现一个客户单位组织树的功能，不限层级，数据量巨大，采用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)

}

})

}

在多选时候

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.handleEditTreeDataMuti(resp.data)

} else {

this.$Message.error(resp.result_msg)

}

})

}

完整代码

<template>
  <div>
    <Tooltip max-width="200" :disabled="tooltipDisabled" :content="formData.longTitle">
      <treeselect
        ref="treeselect"
        :limit="3"
        :clearable="clearable"
        :limitText="count => '更多' + count + '个'"
        :flat="flat"
        :multiple="multiple"
        :class="{ treeClass: isEdit }"
        :options="product_map"
        :appendToBody="appendToBody"
        :value-consists-of="valueConsistsOf"
        :disabled="disabled"
        :placeholder="placeholder"
        @select="toSelectProduct"
        :async="isAsync"
        :defaultExpandLevel="expandLevel"
        :cacheOptions="true"
        :disableFuzzyMatching="false"
        :load-options="isAsync ? asyncOptions : loadOptions"
        v-model="checkRroduct"
        noChildrenText="没有数据"
        noOptionsText="没有数据"
        noResultsText="没有搜索结果"
        @search-change="searchChange"
        @keydown.native="treeKeydown($event)"
        @keyup.native="treeKeyup($event)"
        @open="itemopen"
        @close="itemClose"
      >
        <div slot="option-label" slot-scope="{ node }">
          <div :title="node.raw.label" v-if="node.raw.disabled" :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>
      </treeselect>
    </Tooltip>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    placeholder: {
      type: String,
      default: '请选择'
    },
    indexTTT: {
      type: Number,
      default: 0
    },
    type: {
      type: String,
      default: 'A'
    },
    valueConsistsOf: {
      type: String,
      default: 'ALL_WITH_INDETERMINATE'
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    flat: {
      type: Boolean,
      default: false
    },
    clearT: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    khzx: {
      type: Boolean,
      default: false
    },
    tooltipShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isAsync: false,
      checkRroductT: null,
      userInfo: JSON.parse(this.$libs.getSessionStorage('user-info')),
      tooltipDisabled: true,
      checkRroduct: null,
      expandLevel: 0,
      product_map: [],
      product_mapTemp: [],
      formData: {},
      searchQuery: '',
      timer: null,
      dataT: [],
      formDataID: ''
    }
  },
  watch: {
    checkRroduct(val) {
      if (Array.isArray(val)) {
        this.formData.checkRroduct = val
        this.tooltipDisabled = val.length == 0
        this.$emit('getCheckRroduct', this.formData)
      } else {
        this.formData.checkRroduct = val || ''
        this.tooltipDisabled = this.tooltipShow ? true : !val
        if (!val) {
          this.formData.label = ''
          this.formData.longTitle = ''
        }
        if (!(this.clearT && this.type != 'A')) {
          this.$emit('getCheckRroduct', this.formData, this.indexTTT)
        }
      }
    }
  },
  mounted() {
    // console.log(this.type)
    if (this.type == 'A') {
      this.initTreeData()
    }
  },
  methods: {
    clear() {
      this.checkRroduct = null
      this.tooltipDisabled = true
    },
    // 客户中心显示父级
    handleEditTreeData(formData) {
      this.formDataID = formData.staff_id
      if (!this.isEdit) {
        this.$http.operation.queryTenantByLevel().then(resp => {
          if (resp && resp.result_code == '0') {
            if (resp.data.length == 0) {
              this.$http.operation.queryTenantByLike({ staff_id: this.userInfo.staff_id }).then(resp => {
                if (resp && resp.result_code == '0') {
                  resp.data.map(item => {
                    item.id = item.staff_id
                    item.label = item.company_name
                    item.longTitle = item.company_name
                    if (item.hasChildren) {
                      item.children = null
                    }
                    item.disabled = this.khzx && this.type == 'M' ? (item.staff_id == formData.staff_id ? true : false) : false
                  })
                  if (!formData.group_id) {
                    this.product_map = resp.data
                    this.product_mapTemp = resp.data
                  } else {
                    const parentIds = formData.group_id.split('/')
                    this.arrInsert(parentIds, resp.data).then(finalData => {
                      // 在这里，finalData 就是 arrInsert 方法返回的最终 dataT
                      resp.data = this.addLongTitle(finalData, formData.staff_id)
                      this.formData.longTitle = formData.group_name
                      this.formData.label = formData.company_name
                      this.formData.group_id = formData.group_id
                      this.checkRroduct = formData.parent_id
                      this.product_map = resp.data
                      this.product_mapTemp = resp.data
                    })
                  }
                  this.product_mapTemp = resp.data
                } else {
                  this.$Message.error(resp.result_msg)
                }
              })
            } else {
              resp.data.map(item => {
                item.id = item.staff_id
                item.label = item.company_name
                item.longTitle = item.company_name
                if (item.hasChildren) {
                  item.children = null
                }
                item.disabled = this.khzx && this.type == 'M' ? (item.staff_id == formData.staff_id ? true : false) : false
              })
              if (!formData.group_id) {
                this.product_map = resp.data
                this.product_mapTemp = resp.data
              } else {
                const parentIds = formData.group_id.split('/')
                this.arrInsert(parentIds, resp.data).then(finalData => {
                  // 在这里，finalData 就是 arrInsert 方法返回的最终 dataT
                  resp.data = this.addLongTitle(finalData, formData.staff_id)
                  this.formData.longTitle = formData.group_name
                  this.formData.label = formData.company_name
                  this.formData.group_id = formData.group_id
                  this.checkRroduct = formData.parent_id
                  this.product_map = resp.data
                  this.product_mapTemp = resp.data
                })
              }
            }
          } else {
            this.$Message.error(resp.result_msg)
          }
        })
      } else {
        this.formData.longTitle = formData
        this.tooltipDisabled = this.tooltipShow ? true : false
      }
    },
    // 其他页面修改
    handleEditTreeDataT(formData) {
      this.$http.operation.queryTenantByLevel().then(resp => {
        if (resp && resp.result_code == '0') {
          if (resp.data.length == 0) {
            this.$http.operation.queryTenantByLike({ staff_id: this.userInfo.staff_id }).then(resp => {
              if (resp && resp.result_code == '0') {
                resp.data.map(item => {
                  item.id = item.staff_id
                  item.label = item.company_name
                  item.longTitle = item.company_name
                  if (item.hasChildren) {
                    item.children = null
                  }
                })
                const parentIds = formData.group_id.split('/')
                this.arrInsert(parentIds, resp.data).then(finalData => {
                  // 在这里，finalData 就是 arrInsert 方法返回的最终 dataT
                  resp.data = this.addLongTitle(finalData, formData.staff_id)
                  this.formData.longTitle = formData.group_name
                  this.formData.label = formData.company_name
                  this.formData.group_id = formData.group_id
                  this.checkRroduct = formData.staff_id
                  this.checkRroductT = formData.staff_id
                  this.product_map = resp.data
                  this.product_mapTemp = resp.data
                })
              } else {
                this.$Message.error(resp.result_msg)
              }
            })
          } else {
            resp.data.map(item => {
              item.id = item.staff_id
              item.label = item.company_name
              item.longTitle = item.company_name
              if (item.hasChildren) {
                item.children = null
              }
            })
            const parentIds = formData.group_id.split('/')
            this.arrInsert(parentIds, resp.data).then(finalData => {
              // 在这里，finalData 就是 arrInsert 方法返回的最终 dataT
              resp.data = this.addLongTitle(finalData, formData.staff_id)
              this.formData.longTitle = formData.group_name
              this.formData.label = formData.company_name
              this.formData.group_id = formData.group_id
              this.checkRroduct = formData.staff_id
              this.checkRroductT = formData.staff_id
              this.product_map = resp.data
              this.product_mapTemp = resp.data
            })
          }
        } else {
          this.$Message.error(resp.result_msg)
        }
      })
    },
    addLongTitle(treeData, staff_id) {
      // 从根节点开始，不需要前缀
      return treeData.map(node => addNodeLongTitle(node, ''))

      function addNodeLongTitle(node, prefix) {
        // 如果没有提供title，则使用company_name作为默认title
        const title = node.company_name
        // 拼接前缀和当前节点的title
        node.longTitle = (prefix ? prefix + ' / ' : '') + title
        node.isDefaultExpanded = staff_id == node.id ? true : false

        // 如果存在子节点，递归地为它们添加longTitle，并传递更新后的前缀
        if (node.children && node.children.length > 0) {
          node.children = node.children.map(child => addNodeLongTitle(child, node.longTitle))
        }

        return node
      }
    },
    async arrInsert(parentIds, data) {
      let dataT = JSON.parse(JSON.stringify(data))
      const findNodeById = (id, nodes, data) => {
        let nodesT = nodes
        for (let i = 0; i < nodesT.length; i++) {
          if (nodesT[i].id == id) {
            nodesT[i].children = data
          }
          if (nodesT[i].children && nodesT[i].children.length > 0) {
            findNodeById(id, nodesT[i].children, data)
          }
        }
        return nodesT
      }
      for (let i = 0; i < parentIds.length; i++) {
        let respT = await this.$http.operation.queryTenantByLevel({ parent_id: parentIds[i] })
        respT.data.map(item => {
          item.id = item.staff_id
          item.label = item.company_name
          if (item.hasChildren) {
            item.children = null
          }
        })
        dataT = findNodeById(parentIds[i], dataT, respT.data.length == 0 ? null : respT.data)
      }
      return dataT
    },
    // 多选逻辑
    handleEditTreeDataMuti(formData) {
      this.$http.operation.queryTenantByLevel().then(resp => {
        if (resp && resp.result_code == '0') {
          if (resp.data.length == 0) {
            this.$http.operation.queryTenantByLike({ staff_id: this.userInfo.staff_id }).then(resp => {
              if (resp && resp.result_code == '0') {
                resp.data.map(item => {
                  item.id = item.staff_id
                  item.label = item.company_name
                  item.longTitle = item.company_name
                  if (item.hasChildren) {
                    item.children = null
                  }
                })
                const dataT = JSON.parse(JSON.stringify(this.handleTreeById(formData, true)))
                this.product_map = dataT
                this.checkRroduct = formData.map(item => item.staff_id)
                this.formData.longTitle = formData.map(item => item.company_name).join(',')
                this.product_mapTemp = resp.data
              } else {
                this.$Message.error(resp.result_msg)
              }
            })
          } else {
            resp.data.map(item => {
              item.id = item.staff_id
              item.label = item.company_name
              item.longTitle = item.company_name
              if (item.hasChildren) {
                item.children = null
              }
            })
            const dataT = JSON.parse(JSON.stringify(this.handleTreeById(formData, true)))
            this.product_map = dataT
            this.checkRroduct = resp.data.map(item => item.staff_id)
            this.formData.longTitle = resp.data.map(item => item.company_name).join(',')
            this.product_mapTemp = resp.data
          }
        } else {
          this.$Message.error(resp.result_msg)
        }
      })
    },
    initTreeData() {
      this.$http.operation.queryTenantByLevel().then(resp => {
        if (resp && resp.result_code == '0') {
          if (resp.data.length == 0) {
            this.$http.operation.queryTenantByLike({ staff_id: this.userInfo.staff_id }).then(resp => {
              if (resp && resp.result_code == '0') {
                resp.data.map(item => {
                  item.id = item.staff_id
                  item.label = item.company_name
                  item.longTitle = item.company_name
                  if (item.hasChildren) {
                    item.children = null
                  }
                })
                this.product_map = resp.data
                this.product_mapTemp = resp.data
              } else {
                this.$Message.error(resp.result_msg)
              }
            })
          } else {
            resp.data.map(item => {
              item.id = item.staff_id
              item.label = item.company_name
              item.longTitle = item.company_name
              if (item.hasChildren) {
                item.children = null
              }
            })
            this.product_map = resp.data
            this.product_mapTemp = resp.data
          }
        } else {
          this.$Message.error(resp.result_msg)
        }
      })
    },
    toSelectProduct(val) {
      if (this.clearT && this.type != 'A') {
        this.$Modal.confirm({
          title: '确认',
          content: '是否要改变客户单位，后续数据将被清空？',
          onOk: () => {
            if (val.disabled) {
              this.$nextTick(() => {
                this.checkRroduct = null
              })
              return
            }
            if (val.group_id) {
              this.formData.group_id = val.group_id + '/' + val.id
              this.formData.parent_id = val.id
            } else {
              this.formData.group_id = val.id
              this.formData.parent_id = val.id
            }
            this.formData.label = val.label
            this.formData.longTitle = val.longTitle
            // this.$emit('getCheckRroduct', this.formData, this.indexTTT)
          },
          onCancel: () => {
            this.checkRroduct = this.checkRroductT
            this.$Message.info('取消 ')
          }
        })
      } else {
        if (val.disabled) {
          this.$nextTick(() => {
            this.checkRroduct = null
          })
          return
        }
        if (val.group_id) {
          this.formData.group_id = val.group_id + '/' + val.id
          this.formData.parent_id = val.id
        } else {
          this.formData.group_id = val.id
          this.formData.parent_id = val.id
        }
        this.formData.label = val.label
        this.formData.longTitle = val.longTitle
        // this.$emit('getCheckRroduct', this.formData, this.indexTTT)
      }
    },
    asyncOptions({ action, parentNode, searchQuery, callback }) {
      // console.log(action, 1)
      // console.log('isAsync1', this.isAsync)
      if (action == 'ASYNC_SEARCH') {
        this.searchQuery = searchQuery
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.$http.operation.queryTenantByLike({ company_name: this.searchQuery }).then(resp => {
            if (resp && resp.result_code == '0') {
              resp.data.map(item => {
                item.id = item.staff_id
                item.label = item.company_name
              })
              const dataT = JSON.parse(JSON.stringify(this.handleTreeById(resp.data)))
              this.dataT = dataT
              callback(null, dataT)
            } else {
              this.$Message.error(resp.result_msg)
            }
          })
          this.timer = null
        }, 1000)
      } else {
        callback(null, this.dataT)
      }
    },
    loadOptions({ action, parentNode, searchQuery, callback }) {
      // console.log(action, 2)
      // console.log('isAsync2', this.isAsync)
      if (action == 'LOAD_CHILDREN_OPTIONS') {
        this.$http.operation.queryTenantByLevel({ parent_id: parentNode.id }).then(resp => {
          if (resp && resp.result_code == '0') {
            resp.data.map(item => {
              item.id = item.staff_id
              item.label = item.company_name
              item.longTitle = parentNode.longTitle + ' / ' + item.company_name
              if (item.hasChildren) {
                item.children = null
              }
              item.disabled = this.khzx && this.type == 'M' ? (item.staff_id == this.formDataID ? true : false) : false
            })
            parentNode.children = resp.data
            callback()
          } else {
            this.$Message.error(resp.result_msg)
          }
        })
      }
    },
    handleTreeById(data, flag) {
      const tree = []
      let dataT = data.map(item => String(item.staff_id))
      if (this.khzx && this.type == 'M') {
        dataT.push(this.formDataID)
      }
      // console.log('dataT: ', dataT)

      data.forEach(item => {
        const groupId = item.group_id.split('/')
        const groupName = item.group_name.split('/')

        let currentLevel = tree

        groupId.forEach((id, index) => {
          const existingNode = currentLevel.find(node => node.id === id)
          if (existingNode) {
            currentLevel = existingNode.children
          } else {
            const newNode = {
              id,
              label: groupName[index],
              group_id: flag ? groupId[index] : groupId.slice(0, index).join('/'),
              longTitle: flag ? groupName[index] : groupName.slice(0, index + 1).join('/'),
              children: [],
              disabled: flag ? false : !dataT.includes(id)
            }
            currentLevel.push(newNode)
            currentLevel = newNode.children
          }
        })
      })
      // 遍历tree并删除children为空数组的项
      function pruneEmptyChildren(nodes) {
        return nodes.filter(node => {
          if (node.children && node.children.length === 0) {
            delete node.children // 删除children属性
            return true // 保留这个节点，因为它可能还有其他有用的属性
          }
          if (node.children) {
            pruneEmptyChildren(node.children) // 递归处理子节点
          }
          return true // 保留这个节点
        })
      }

      // 在完成树的构建后，调用pruneEmptyChildren函数
      pruneEmptyChildren(tree)
      return tree
    },
    searchChange(val) {
      if (!val) {
        this.isAsync = false
        this.expandLevel = 0
        this.product_map = JSON.parse(JSON.stringify(this.product_mapTemp))
      } else {
        this.isAsync = true
        this.expandLevel = Infinity
      }
    },
    // 输入时打开异步，下拉open/close关闭异步
    treeKeydown() {
      this.isAsync = true
      this.expandLevel = Infinity
      this.$refs.treeselect.initialize()
    },
    treeKeyup(e) {
      // if (!e.target.value) {
      //   this.isAsync = false
      //   this.expandLevel = 0
      // }
    },
    itemopen() {
      // console.log('itemopen')
      this.tooltipDisabled = true
      this.isAsync = false
      this.expandLevel = 0
      // this.product_map = JSON.parse(JSON.stringify(this.product_mapTemp))
    },
    itemClose() {
      // console.log('itemclose')
      this.isAsync = false
      this.tooltipDisabled = this.tooltipShow ? true : Array.isArray(this.checkRroduct) ? this.checkRroduct.length == 0 : !this.checkRroduct
      this.expandLevel = 0
    },
    transformData(groupId, groupName, staff_id, name, flag) {
      const groups = groupId.split('/')
      const names = groupName.split('/')

      // 检查groupId和groupName的分割是否匹配
      if (groups.length !== names.length) {
        throw new Error('groupId和groupName的分割不匹配')
      }

      // 递归函数来构建树形结构
      function buildTree(index) {
        if (flag && index >= groups.length) {
          // 当到达叶子节点时，添加额外的staff信息
          return {
            id: staff_id,
            label: name,
            longTitle: `${names.slice(0, index).join(' / ')} / ${name}`,
            children: []
          }
        } else if (index >= groups.length) {
          return null
        }
        const currentGroupId = groups[index]
        const currentGroupName = names[index]
        const longTitle = index === 0 ? currentGroupName : `${names.slice(0, index + 1).join(' / ')}`

        const child = buildTree(index + 1) // 递归构建子节点

        return {
          id: Number(currentGroupId),
          label: currentGroupName,
          longTitle: longTitle,
          children: child ? [child] : flag ? null : [] // 如果有子节点，则放入数组中
        }
      }

      // 从根节点开始构建树
      const root = buildTree(0)

      return root
    }
  }
}
</script>

<style lang="scss" scoped>
.vue-treeselect {
  font-size: 14px;
  height: 32px;
}
.labelClass {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: #333;
}
.treeClass {
  ::v-deep .vue-treeselect__placeholder {
    color: black;
    font-size: 14px;
  }
}
.is-disabled {
  /* 设置禁用选项的样式 */
  color: #ccc;
  cursor: not-allowed;
  /* 可以添加更多样式 */
}
</style>

后记：附上vue-treeselect的组件样式修改

// 选择框的样式
::v-deep .vue-treeselect__control {
  background-color: rgb(10, 19, 33) !important;
  border: rgb(10, 19, 33);
}
// 下拉框的样式
// ::v-deep .vue-treeselect__option {
//   color: #2d8cf0;
// }
// 选中项的样式
::v-deep .vue-treeselect__single-value {
  color: #2d8cf0;
}
// 默认提示语的样式
::v-deep .vue-treeselect__placeholder {
  color: #2d8cf0;
}

GitHub 加速计划 / vu / vue

207.55 K

33.66 K

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：2 个月前 )

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前

e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m