element-UI级联选择器(Cascader 回显、默认显示项) - （返回结果的）格式转化 - 代码篇

el-cascader组件 ：（返回结果的）格式转化

有时候会报错：TypeError: thsAreaCode.replace is not a function （bug截图如下）

说白了就是该组件结果返回获得的是个数组，而不是字符串。所以不能使用.replace方法去转化格式。
因而：才有了下面修改后的代码。

为了解决上述问题，先看文章内的举例代码：

• 参考文章1：（element-UI级联选择器(Cascader)获取label值 - 代码篇）

• 附：element-UI官网组件地址

---

DEMO.1

DEMO.2

全部相关代码：

<el-form-item label="求职地址" :label-width="labelWidth">
	<el-cascader
		ref="cascaderAddr"        //  注意1：
		:options="addressOptions"
		change-on-select
		v-model="form.areaCode"    // 注意2：
		@blur="onBlurAddressFun"
	></el-cascader>
</el-form-item>
<el-form-item label="" :label-width="labelWidth">
	<el-input v-model="form.detailaddress" placeholder="请输入地址，例如：北京市朝阳区附近" autocomplete="off"></el-input>
</el-form-item>

===============================================================================================

import cityOptions from '../../../static/js/area.min.js'       // 注意3：

const areaLabel='' // 拼接 三级联动地址代码               // 注意4：

  export default {
		name: 'shareResume',
		cityOptions,
		areaLabel,               // 注意5：
    	data() {
      		return {
				isLoading: false, // 拼命加载中
				resumes :[],
				/* 右侧悬停栏*/
				form: {
					areaCode: ['340000','340100','340111'], // 三级联动地区代码 默认显示  // 注意6：
					detailaddress: "", //手动输入的详细地址
				},
     	    }
        },
        method: {
			// 三级地址选择：onbulr事件
			onBlurAddressFun: function(e,areaLabel){
				areaLabel = this.$refs['cascaderAddr'].currentLabels;
				// console.log(typeof(areaLabel));
				areaLabel = areaLabel.join("/"); // 类型转化 + 格式转化
				// console.log(typeof(areaLabel));
				// areaLabel = areaLabel.replace(/,/gi,"_");
				console.log("areaLabel="+areaLabel);
			},
			ajaxRegisterApi: function (form,isLoading,areaLabel) {  
				// 地址处理
				// 拼接字符串
				areaLabel = this.$refs['cascaderAddr'].currentLabels;
				areaLabel = areaLabel.join("/"); // 类型转化 + 格式转化
				// console.log("areaLabel2="+areaLabel);
				var stringAddr = areaLabel + "-" +this.form.detailaddress; // 三级地址联动 + 手动输入部分
				console.log("stringAddr="+stringAddr)
			
				// ···其余代码省略···
				
			}
        }
}

---

修改后的代码：（对比:参考文章1）

		// 三级地址选择：onbulr事件
			handleAddressFun: function(e,form,thsAreaCode){
				thsAreaCode = this.$refs['cascaderAddr'].currentLabels;
				// console.log(typeof(thsAreaCode));
				thsAreaCode = thsAreaCode.join("/");     // 注意4：类型转化 + 格式转化
				// console.log(typeof(thsAreaCode));
				// thsAreaCode = thsAreaCode.replace(/,/gi,"_");
				console.log("thsAreaCode="+thsAreaCode);
			},

注意：

• 上述格式转化的代码，请对比参考文章："（element-UI级联选择器(Cascader)获取label值 - 代码篇）" 内的原始代码。
• 具体不再赘述。

---

以上就是关于“ element-UI级联选择器(Cascader 回显、默认显示项) - （返回结果的）格式转化 - 代码篇 ” 的全部内容。