uniapp组件——异步级联面板(async-cascade-select)

异步级联面板(async-cascade-select)

同步/异步级联面板选择(支持异步数据加载,默认值设置等配置),针对城市和级联大数据量解决方案;提高交互和渲染性能

基本用法

导入方法:

  1. 直接使用 HBuilderX 导入插件
  2. 下载插件 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...

相关推荐
Q_Q5110082857 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_916007479 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者810 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
2501_9159090613 小时前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview
盛夏绽放13 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
2501_915918411 天前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_915909061 天前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
赵庆明老师1 天前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj1 天前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app