级联选择器：省市区

elementui 级联选择器的使用：

传送门

• 实例

<el-form-item :label-width="formLabelWidth" label="所在省/市/区">
		<el-cascader
			v-model="value"
			:options="options"
			:props="defaultParams"
			 clearable
			 filterable
			 placeholder="请选择省/市/区"
			style="width: 100%"
			@change="handleChange"
		/> 
</el-form-item>
...
data:{
    
    
		value: [110000, 110000, 110000], //默认选中省市区编号
		options: [],
		defaultParams: {
    
    
				label: "areaName",
				value: "areaCode",
				children: "children",
			},
}
...
methods: {
    
    
	handleChange(val) {
    
    
	// 数据回显
			this.$nextTick(() => {
    
    
				this.dataForm.provinceCode = val[0];
				this.dataForm.cityCode = val[1];
				this.dataForm.areaCode = val[2];
			}, 500);
		},
}

• 重要参数说明
  1.v-model：选择框中的内容
  2.options：级联选择框下拉的数据源
  3.props：级联选择框下拉的数据源的配置选项
  4.change：选中节点的值发生变化触发
• 关于value的赋值

this.value = [this.dataForm.provinceCode, this.dataForm.cityCode, this.dataForm.areaCode];