异步级联面板（async-cascade-select）
同步/异步级联面板选择（支持异步数据加载，默认值设置等配置），针对城市和级联大数据量解决方案；提高交互和渲染性能
基本用法
导入方法：
- 直接使用 HBuilderX 导入插件
- 下载插件 zip ,将 async-cascade-select 文件夹复制到项目 uni_modules/components 文件夹中，import+components 引入。
使用方式(demo)：
js
<template>
<async-cascade-select :list="list" :async="isAsync" useName='name' @click="handleClick" :load-data="loadData"/>
</template>
<script>
export default {
data() {
return {
// 异步组件标识
isAsync：true, // 类型：Boolean; 为true可不定义list, 为false则设置loadData级联请求数据
// list 的 key 为'name'，将 useName 指定为'name'，默认值为'label'
list: [
// 三级城市数据
{
id: 1, name: '四川省', children: [
{
id: 11, name: '成都市', children: [
{ id: 111, name: '武侯区', children: [] },
{ id: 112, name: '锦江区', children: [] }
]
},
{
id: 12, name: '绵阳市', children: [
{ id: 121, name: '涪城区', children: [] },
{ id: 122, name: '游仙区', children: [] }
]
}
]
},
// 五级城市数据
{
id: 2, name: '广东省', children: [
{
id: 21, name: '广州市', children: [
{
id: 211, name: '天河区', children: [
{
id: 2111, name: '天河北街道', children: [
{ id: 21111, name: '天河北社区', children: [] }
]
}
]
}
]
}
]
}
],
};
},
methods: {
// 异步加载数据方法
async loadData(obj) {
// 正常接口请求方式
return new Promise((resolve) => {
axios.get(data).then((res) => {
if (res.code == 200) {
let resArr = res.data.map(item => {
return {
name: item.cityName,
id: item.id,
index: (obj.index) + 1 || 0,
children: []
};
})
resolve(resArr)
}
}).catch((res) => {
console.log(res, 'res')
})
})
},
handleClick(data) {
console.log('data', data);
}
}
};
</script>属性和事件配置
| 参数 | 类型 | 说明 | 是否必传 |
|---|---|---|---|
| list | Array | 展示数组，list:[{label:'', value:'',children:[]}] | 是 |
| useName | String | 指定对象要显示的 key，默认为 'label' | 否 |
| defaultValue | Array | 默认选中值，每一层级的id数组， | 否 |
| async | Boolean | 是否异步加载，默认'false'，不异步加载，通过list数据使用 | 否 |
| loadData | Function | 自定义异步加载方法，注意该函数指针this，使用箭头函数效果最佳 | 否 |
| leftText | String | 重置按钮文字，默认为'重置' | 否 |
| isLevel | Number | 级联层数，默认为5级 | 否 |
| 事件名 | 说明 | 返回值 |
|---|---|---|
| @click | 点击数据层选项后触发，返回参数为选择数组 | Array |
| @confirm | 点击确认按钮后触发，返回参数为选择数组 | Array |
| @reset | 点击重置按钮后触发，无返回值 | Array |
特别鸣谢：lx-cascade-select 组件作者，基于此组件开发 我只是代码的搬运工，哈哈；有问题评论区交流，欢迎提供思路和优化方案； 有喜欢的点赞收藏下，给摊主一些信心和鼓励，谢谢！！！ 链接：ext.dcloud.net.cn/plugin?id=2...