更新记录

1.1.1(2023-07-10) 下载此版本

  • 修复不完全选中状态在清除所有选项时不重置问题

1.1.0(2023-07-10) 下载此版本

  • 重写checkbox,解决与colorui样式冲突问题
  • 父级添加子级未全选状态,更直观了解选中数据情况
  • 样式优化,提取文件内样式变量
  • 代码体积优化
  • 文档更新

1.0.6(2023-06-28) 下载此版本

  • 文档更新
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.0 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

customthree-tree-select 使用指南

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

有问题可以加 QQ 群:297080738, 新群:460688316

优势

💪:基于 uni-popupuni-iconsuni-easyinput 插件进行开发,默认样式与 uni-easyinput 样式对标。

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

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

⚙ :提供更多配置项。

📦:开箱即用。

Props

属性名 类型 默认值 说明
canSelectAll Boolean false 开启一键全选功能
clearResetSearch Boolean false 设置为 true 并且搜索之后,点击输入框清除按钮,会清空搜索内容并且会直接重置整个弹窗内树形选择器内容,默认情况下只有清除之后再次进行查询才会重置选择器
animation Boolean ture 是否开启弹窗动画
is-mask-click Boolean true 点击遮罩关闭弹窗
mask-background-color String rgba(0,0,0,0.4) 蒙版颜色,建议使用 rgba 颜色值
background-color String none 主窗口背景色
safe-area Boolean true 是否适配底部安全区
choseParent Boolean true 父节点是否可选
linkage Boolean false 父子节点是否联动
placeholder String 请选择 空状态信息提示、弹窗标题
confirmText String 完成 确定按钮文字
confirmTextColor String #007aff 确定按钮文字颜色
listData Array - 展示的数据
dataLabel String name listData 中对应数据的 label
dataValue String id listData 中对应数据的 value
dataChildren String children listData 中对应数据的 children
clearable Boolean false 是否显示清除按钮,点击清除所有已选项
mutiple Boolean false 是否可以多选
disabled Boolean false 是否允许修改
search Boolean false 是否可以搜索(常用于数据较多的情况)
showChildren Boolean true 默认展开(数据内部 showChildren 属性优先级更高,可以设置全局收起,单独展开某一条数据)
border Boolean false 显示引导线
load Function function(){} lazyLoadChildren 设置为true 后,点击某个节点发送请求获取子节点数据,用法见下方异步懒加载示例
lazyLoadChildren Boolean false 是否开启异步懒加载节点
v-model/modelValue Array | String [ ] 已选择的值,通过 v-model 进行绑定,例如:v-model="formData.selectedList" ,根据你绑定数据的类型自动返回相同类型的数据,String 类型通过 , 进行分隔

Events

事件名称 说明 返回值
change 弹窗组件状态发生变化触发 e={show: true | false,type:当前模式}
maskClick 点击遮罩层触发
update:modelValue 选中数据或取消选中时触发 以数组形式返回已选择数据的 dataValue 对应值
select-change 选中数据或取消选中时触发 以数组形式返回选中数据完整信息
removeSelect 从选择框内删除元素时触发

基础使用示例

<template>
  <customthree-tree-select :listData="listData" v-model="formData.selectedArr" />
  <customthree-tree-select :listData="listData" v-model="formData.selectedString" />
</template>

<script setup>
import { reactive } from 'vue'

const formData = reactive({
  selectedArr: [],
  selectedString: ''
})

const 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>
  <customthree-tree-select
    mutiple
    linkage
    clearable
    search
    dataLabel="text"
    dataValue="value"
    :listData="listData"
    v-model="formData.selected"
  ></custom-tree-select>
</template>

<script setup>
import { reactive } from 'vue'

const formData = reactive({
  selected: ''
})

const listData =  [
  {
    id: 1,
    name: '城市1',
    children: [
      {
        id: 3,
        name: '街道1',
        disabled: true
        children: [
          {
            id: 4,
            name: '小区1'
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '城市2',
    children: [
      {
        id: 6,
        name: '街道2',
        visible: false
      }
    ]
  }
]
</script>

异步懒加载

<template>
  <view class="content">
    <customthree-tree-select
      search
      linkage
      clearable
      clearResetSearch
      border
      mutiple
      lazyLoadChildren
      canSelectAll
      :showChildren="false"
      :listData="listData"
      :load="loadNode"
      dataLabel="text"
      dataValue="value"
      v-model="selectedStr"
    ></customthree-tree-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedStr: '',
      listData: [
        {
          value: '0',
          text: '测试懒加载'
        },
        {
          value: '1',
          text: '城市1',
          children: [
            {
              value: '1-1',
              text: '街道1',
              disabled: true
            }
          ]
        }
      ]
    }
  },
  methods: {
    loadNode(node) {
      return new Promise((resolve) => {
        setTimeout(() => {
          const item = this.listData.find((item) => item.value === node.value)
          if (item) {
            resolve([
              {
                value: '0-1',
                text: '懒加载子元素'
              }
            ])
          }
          resolve([])
        }, 500)
      })
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问