el-cascader组件默认赋值后，删除内容可能出现的坑

最新推荐文章于 2024-05-16 13:30:42 发布

Let_It_Go_One

最新推荐文章于 2024-05-16 13:30:42 发布

阅读量1.5k

点赞数

分类专栏：删除el-cascader组件默认值可能出现的坑文章标签： vue.js javascript

本文链接：https://blog.csdn.net/let_it_go_one/article/details/108763836

版权

删除el-cascader组件默认值可能出现的坑专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：
A页面跳转至B页面，B页面需要展示赋值了的el-cascader组件。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div id="app-2">
			<el-cascader
			v-model="value"
			:options="options"
			:props="props"
			clearable></el-cascader>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script>
		var app2 = new Vue({
		el: '#app-2',
		data: {
			props: { multiple: true },
			value: [[17,18,19],[1,7,10],[1,2,3]],
			options: [
				{
				value: 1,
				label: '东南',
				children: [{
					value: 2,
					label: '上海',
					children: [
						{ value: 3, label: '普陀' }
					]
				},
				{
					value: 7,
					label: '江苏',
					children: [
						{ value: 10, label: '无锡' }
					]
				}]
			},
			{
				value: 17,
				label: '西北',
				children: [{
					value: 18,
					label: '陕西',
					children: [
						{ value: 19, label: '西安' },
					]
				}, {
					value: 21,
					label: '新疆维吾尔族自治区',
					children: [
						{ value: 22, label: '乌鲁木齐' }
					]
				}]
			}]
  }
})
	</script>
	</body>
</html>

此时，你如果删除默认值的西北 / 陕西 / 西安，页面上删除的却是东南 / 上海 / 普陀。
图片如下：
在这里插入图片描述

最后发现，默认赋值的时候得按照这个组件的值的顺序来，即value按照options的顺序来，即下面代码，就可以正确删除啦。

value: [[1,2,3],[1,7,10],[17,18,19]]

Let_It_Go_One

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
el-cascader组件默认赋值后，删除内容可能出现的坑

需求：A页面跳转至B页面，B页面需要展示赋值了的el-cascader组件。图片如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body>
复制链接

扫一扫