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

一安装

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

你可能感兴趣的:(vue,项目,javascript)