.. | ||
data-select-item.vue | ||
readme.md | ||
treeSelect.vue | ||
utils.ts |
customthree-tree-select 使用指南
提示: 使用该插件前确保你已经导入 uni-popup
uni-icons
uni-easyinput
插件。
有问题可以加 QQ 群:297080738
优势
💪:基于 uni-popup
、 uni-icons
、 uni-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 | false | 父节点是否可选 |
linkage | Boolean | false | 父子节点是否联动 |
placeholder | String | 请选择 | 空状态信息提示、弹窗标题 |
confirmText | String | 完成 | 确定按钮文字 |
confirmTextColor | String | #007aff | 确定按钮文字颜色 |
dataSource | Array | - | 展示的数据 |
dataLabel | String | name | dataSource 中对应数据的 label |
dataValue | String | id | dataSource 中对应数据的 value |
dataChildren | String | children | dataSource 中对应数据的 children |
clearable | Boolean | false | 是否显示清除按钮,点击清除所有已选项 |
mutiple | Boolean | false | 是否可以多选 |
disabled | Boolean | false | 是否允许修改 |
search | Boolean | false | 是否可以搜索(常用于数据较多的情况) |
showChildren | Boolean | false | 默认不展开(数据内部 showChildren 属性优先级更高,可以设置全局收起,单独展开某一条数据) |
border | Boolean | false | 显示引导线 |
load | Function | function(){} | lazyLoadChildren 设置为true 后,点击某个节点发送请求获取子节点数据,用法见下方异步懒加载示例 |
lazyLoadChildren | Boolean | false | 是否开启异步懒加载节点 |
v-model/modelValue | Array | String | [ ] | 已选择的值,通过 v-model 进行绑定,例如:v-model="formData.selectedList" ,根据你绑定数据的类型自动返回相同类型的数据,String 类型通过 , 进行分隔 |
deleteSource | Boolean | false | 是否可删除已选数据 |
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>