el-cascader 级联选择器回显

xz_code

已于 2022-07-16 08:58:40 修改

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js

于 2020-12-07 08:23:04 首次发布

本文链接：https://blog.csdn.net/qq_44767646/article/details/109367396

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何配置非默认的el-cascader级联选择器，并详细讲解了地区选择器的实现步骤，包括安装地区数据包、引入地区数据及在Vue组件中使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-cascader 级联选择器回显

- 1.不是默认的label 、value和children
- 2.地区选择

1.不是默认的label 、value和children

<el-cascader
   :props="customProps"
   placeholder="请选择"
   v-model="addServiceForm.serviceTypeId"
   :options="indexList"
   :show-all-levels="false"
 ></el-cascader>

// 解析
customProps: {
	label: "title", // 重新配置
  	children: "indexModuleVos",
    value: "id",
    emitPath:false, // true 就是完整路径(数据)  false 单个(字符串)
}
customProps: 配置
indexList: 列表

2.地区选择

1.下载地区数据 npm i element-china-area-data / yarn add element-china-area-data
2.引入
	//1.vue
	var regionData = require("element-china-area-data").regionData;
	var CodeToText = require("element-china-area-data").CodeToText;
	//2.nuxt
	if (process.client) {
		var regionData = require("element-china-area-data").regionData;
		var CodeToText = require("element-china-area-data").CodeToText;
	}
	( tips: client-only 只在客户端渲染)

3.使用
data () {
	return {
		regOptions: regionData
	}
}
4.页面
<el-cascader
   v-model="addServiceForm.detailedAddress"
   placeholder="请选择"
   :options="regOptions"
   filterable
   clearable
   @change="handleChangeArea"
 />