vue+element-ui 省市区三级联动（返回汉字）

江-月*夜

已于 2022-03-29 17:05:51 修改

阅读量1.8k

点赞数 2

分类专栏： vue 项目文章标签： javascript

于 2022-03-29 10:30:50 首次发布

本文链接：https://blog.csdn.net/qq_36529240/article/details/123814629

版权

vue 项目专栏收录该内容

52 篇文章 0 订阅

订阅专栏

一安装

npm install element-china-area-data -S

二、导入

import { regionData, CodeToText} from "element-china-area-data"

我们默认地址是汉字不是编码（编码就默认）
如图：
在这里插入图片描述
1.provinceAndCityData是省市二级联动数据（不带“全部”选项）
2.regionData是省市区三级联动数据（不带“全部”选项）
3.provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
4.regionDataPlus是省市区三级联动数据（带“全部”选项）
“全部"选项绑定的value是空字符串”"
5.CodeToText是个大对象，属性是区域码，属性值是汉字用法例如：CodeToText[‘110000’]输出北京市
6.TextToCode是个大对象，属性是汉字，属性值是区域码

省市区三级联动（不带“全部”选项）

<html>
 <head></head>
 <body>
  <template> 
   <div id="app"> 
    <div> 
     <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> 
     </el-cascader> 
    </div> 
   </div> 
  </template> 
  <script>
import { regionData , CodeToText } from "element-china-area-data";

export default {
  name: "app",
  data() {
    return {
      options: regionData,
      selectedOptions: []
    };
  },

  methods: {
    handleChange(value) {
    //value是省市区类似id 返回数组 [110000,110100,110101]，可以当发到后端存储，回显数据
		//汉字
      if (value[1] != null && value[2] != null) {
        var dz =
          CodeToText[value[0]] +
          '/' +
          CodeToText[value[1]] +
          '/' +
          CodeToText[value[2]]
      } else {
        if (value[1] != null) {
          dz = CodeToText[value[0]] + '/' + CodeToText[value[1]]
        } else {
          dz = CodeToText[value[0]]
        }
      }
      console.log(value，dz);
    }
  }
};
</script>
 </body>
</html>

级联的数据回显
在级联选择器中因为它绑定的值是它每个区域的区域码，而我们在创建的时候给后端存入的也是区域码，所以当我们取出后我们只需要处理成它所需要的绑定值，就可以回显了

在这里插入图片描述
数据：[110000,110100,110101]

本文参考https://www.npmjs.com/package/element-china-area-data

江-月*夜

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
vue+element-ui 省市区三级联动（返回汉字）

一安装npm install element-china-area-data -S二、导入import { regionData, CodeToText} from "element-china-area-data"我们默认地址是汉字不是编码（编码就默认）如图：三、代码<html> <head></head> <body> <template> <div id="app"> <div&
复制链接

扫一扫