element-china-area-data文字、编码转换

最新推荐文章于 2024-09-11 16:54:40 发布

刘记代码

最新推荐文章于 2024-09-11 16:54:40 发布

阅读量2.8k

点赞数 2

文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/fdksfskldfdslkfs/article/details/125125858

版权

本文介绍了在使用Element UI的中国地区数据时，如何进行文字与编码之间的转换。在前端开发中，涉及到区域数据选择，通常会遇到从编码到文字的显示问题。文章提到，在事件处理中应用`CodeToText`方法将编码转化为文字以便正常显示，而在回显值时，由于值已经是文字形式，需要使用`TextToCode`将其转为编码。该内容主要适用于JavaScript、Vue.js和前端开发领域的实践。

摘要由CSDN通过智能技术生成

html相关

	<el-cascader
	    :options="options"
	     v-model="selectedOptions"
	     @change="addressChange"
	     clearable
	     class="PVC"
	     size="large"
	 >
	 </el-cascader>

引入相关转换方法

import {regionData, CodeToText, TextToCode} from 'element-china-area-data'
regionData 代表省市区值 赋值给options

默认是编码形式。所以在改变事件就用CodeToText将值改变成文字形式，否则添加的值是编码形式的。

addressChange(arr) {
                this.ruleForm.position = `${CodeToText[arr[0]]}/${CodeToText[arr[1]]}/${
                    CodeToText[arr[2]]
                }`
            },

当回显时值，值是文字形式所以回显不出来，用TextToCode转换成文本。

handleEdit() {
                if (this.multiple.length === 1) {
                    this.dialogVisible = true;
                    this.$nextTick(() => {
                        let multiples = JSON.parse(JSON.stringify(this.multiple[0]));
                        //由于在添加和修改时将区域和详细地址合并
                        //所以回显时就需要再次将值拆分 分别赋值给对应的字段
                        let positionAll = multiples.position.split('-');
                        let priva = positionAll[0];
                        let arr = priva.split('/');
                        let c = {};
                        let d = [];
                        for (let i = 0; i <= arr.length - 1; i++) {
                            if (i === 0) {
                                c = TextToCode[arr[i]];
                                d.push(c.code)
                            } else {
                                c = c[arr[i]];
                                d.push(c.code)
                            }
                        }
                        this.selectedOptions = d;
                        this.ruleForm.position = this.selectedOptions;
                        this.iptval = positionAll[1];
                        this.ruleForm = multiples
                    })
            },
            ```