el-cascader组件 :(返回结果的)格式转化

有时候会报错:TypeError: thsAreaCode.replace is not a function (bug截图如下)
在这里插入图片描述
说白了就是该组件结果返回获得的是个数组,而不是字符串。所以不能使用.replace方法去转化格式。
因而:才有了下面修改后的代码

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


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 回显、默认显示项) - (返回结果的)格式转化 - 代码篇 ” 的全部内容。

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 8 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐