elementui Cascader 级联选择使用心得

相信大家对于elementui并不陌生,作为适配Vue的优秀UI框架之一,一直被所有的开发者痛并快乐着。今天要记录的就是里边的主角之一Cascader。

首先先介绍一下**Cascader --->**当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。

html 复制代码
<el-cascader :options="options" clearable></el-cascader>

1、级联选择器经常会用来做地区的选择,在使用过程中发现了第一个有意思的地方----清空,比如我们经常会给元素添加clearable属性

html 复制代码
<el-cascader :options="options" clearable></el-cascader>

正常选中没问题 当点击了清空按钮之后 下拉的面板应该回到之前没选中的状态,但没有回到之前的状态

解决办法:

html 复制代码
<el-cascader ref="addressCascader" :props="addressOptions" filterable clearable v-model="selectOptions" @change="addressChange" @visible-change="visibleChange"></el-cascader>
javascript 复制代码
addressChange(data){
    if(data && data.length == 0){
        this.$refs['addressCascader'][0].$refs.panel.checkedValue = [] // 清空选中值
		this.$refs['addressCascader'][0].$refs.panel.clearCheckedNodes() // 清空级联选择器选中状态
		this.$refs['addressCascader'][0].$refs.panel.activePath = [] // 清除高亮
		this.$refs['addressCascader'][0].$refs.panel.syncActivePath() // 初始化(只展示一级节点)
	}
}

2、面板展开可直接看到选中的数据

javascript 复制代码
visibleChange(val) {
	if(val) {
		if (this.$refs['addressCascader']) {
			if(this.$refs['addressCascader'][0].getCheckedNodes()[0]){
				this.$refs['addressCascader'][0].$refs.panel.activePath = this.$refs['addressCascader'][0].getCheckedNodes()
			}
		}
	}
}

3、动态加载数据

javascript 复制代码
addressOptions: {
	lazy: true,
	lazyLoad: (node, resolve) => {
		const { level } = node
		const nodes = []
		let type = level ? level + 1 : 1
		this.$http({
			url:this.$http.adornUrl('/business', '/dictprovince/selectList'),
			method: 'post',
			data: { level: type , parentCode: node.value }
		}).then(res => {
		    //console.log("保单归属地", res.data.data)
			res.data.data.map(item => {
			let area = {
				    value: item.code,
					label: item.name,
					leaf: item.level >= 3,
			    };
			    nodes.push(area)
		    })
			resolve(nodes)
	    })
    }
}

动态加载数据需要注意的是leaf的值 如果是二级菜单level>=2,三级菜单level>=3

记录使用当中遇到的问题,不定期更新~

相关推荐
疯狂动物城在逃flash3 分钟前
数据库入门:SQL学习路线图与实战技巧
前端
前端小巷子9 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生9 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
JohnYan9 分钟前
Bun技术评估 - 07 S3
javascript·后端·bun
Mintopia10 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆11 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
掘金一周19 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i21 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
咚咚咚ddd24 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端
MiyueFE24 分钟前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript