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-cascaderref="cascaderAddr" // 注意1：:options="addressOptions"change-on-selectv-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 回显、默认显示项) - （返回结果的）格式转化 - 代码篇 ” 的全部内容。