更新记录

4.1.1（2024-11-20） 下载此版本

• 文档更新

4.1.0（2023-10-22） 下载此版本

• 修复小程序端无法移除已选项问题
• 修复小程序端异步加载节点不可用问题
• 增加点击左侧箭头同样可以展开元素

4.0.0（2023-09-17） 下载此版本

• 调整 v-model 传参类型，为适应数值和字符串同时存在的树形数据

平台兼容性

custom-tree-select 使用指南

找工作中…，大佬们有内推加群联系我

提示：使用该插件前确保你已经导入 uni-popup uni-icons uni-easyinput 插件。

当前插件主要作为表单中选择器来使用，如果只是作为弹窗会出现数据状态无法重置，此时推荐使用 custom-tree-popup 组件。

如果在微信小程序中使用，在 main.js 文件中添加以下代码,2023/05/04 之前安装插件或者本地插件版本 <=3.7.1 需要添加

// #ifdef MP-WEIXIN
Vue.prototype.$bus = new Vue()
// #endif

有问题可以加 QQ 群：297080738

优势

💪：基于 uni-popup、 uni-icons、 uni-easyinput 插件进行开发，默认样式与 uni-easyinput 样式对标。

⚡：全面支持懒加载应对大量数据。

🚀：v-model 绑定数据、数据回显、移除选项。

⚙ ：提供更多配置项。

📦：开箱即用。

Props

listdata 特有属性

Events

基础使用示例

<template>
  <!--/pages/index/index-->
  <custom-tree-select :listData="listData" v-model="formData.selectedArr" />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        selectedArr: [],
      },
      listData: [
        {
          id: 1,
          name: '城市1',
          children: [
            {
              id: 3,
              name: '街道1',
              children: [
                {
                  id: 4,
                  name: '小区1'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          name: '城市2',
          children: [
            {
              id: 6,
              name: '街道2'
            }
          ]
        }
      ]
    }
  }
}
</script>

禁用某些选项，或隐藏某些选项

<template>
  <!--/pages/index/index-->
  <custom-tree-select
    mutiple
    linkage
    clearable
    search
    dataLabel="text"
    dataValue="value"
    :listData="listData"
    :disabledList="[6]"
    v-model="formData.selected"
  ></custom-tree-select>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        selected: []
      },
      listData: [
        {
          value: 1,
          text: '城市1',
          children: [
            {
              value: 3,
              text: '街道1',
              disabled: true
            }
          ]
        },
        {
          value: 2,
          text: '城市2',
          children: [
            {
              value: 6,
              text: '街道2'
            }
          ]
        },
        {
          value: 7,
          text: '城市3',
          visible: false
        }
      ]
    }
  }
}
</script>

动态加载节点

<custom-tree-select
  :listData="listData"
  :load="load"
  lazyLoadChildren
  pathMode
  v-model="selectedArr"
/>

<script>
export default {
  data() {
    return {
      selectedArr: []
    }
  },
  methods: {
    load(node) {
        return new Promise((resolve, reject) => {
        if (node) {
            setTimeout(() => {
            resolve([
                {
                value: '128047129041',
                text: '测试异步加载'
                }
            ])
            }, 2000)
          }
        })
    }
    }   
}
</script>