更新记录

1.1.1（2023-07-10）

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

1.1.0（2023-07-10）

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

1.0.6（2023-06-28）

• 文档更新

平台兼容性

customthree-tree-select 使用指南

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

有问题可以加 QQ 群：297080738， 新群：460688316

优势

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

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

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

⚙ ：提供更多配置项。

📦：开箱即用。

Props

Events

基础使用示例

<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>