uniapp组件——异步级联面板（async-cascade-select）

异步级联面板（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...