element-UI级联选择器(Cascader 回显、默认显示项) - (返回结果的)格式转化 - 代码篇
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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)获取label值 - 代码篇)" 内的原始代码。
- 具体不再赘述。
以上就是关于“ 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 个月前
更多推荐
已为社区贡献27条内容
所有评论(0)