elementui 的省市区级联选择器数据回显问题
关于elementui的级联选择器数据回显问题,找了好多资料也没解决。今天在这记录下级联选择器在编辑的时候数据回显的问题。
这里是在npm找到的一个省市区的数据 https://www.npmjs.com/package/element-china-area-data
安装
npm install element-china-area-data -S
使用
这里引入的时候可以按需引入没有必要全部引入
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
参数说明
- provinceAndCityData是省市二级联动数据(不带“全部”选项)
- regionData是省市区三级联动数据(不带“全部”选项)
- provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)
- regionDataPlus是省市区三级联动数据(带“全部”选项)
- “全部"选项绑定的value是空字符串”"
- CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市
- TextToCode是个大对象,属性是汉字,属性值是区域码
用法例如:TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105
省市区三级联动(不带“全部”选项)
<template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
import { regionData,CodeToText } from 'element-china-area-data'
export default {
data () {
return {
options: regionData,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value)
// 可以在这里去处理数据,拿到的是每个区域的区域码然后将这个区域码存入后端。取得时候也是取出区域码
}
}
}
</script>
以上这些大家都可以在参考地址https://www.npmjs.com/package/element-china-area-data
去查看
级联的数据回显
在级联选择器中因为它绑定的值是它每个区域的区域码,而我们在创建的时候给后端存入的也是区域码,所以当我们取出后我们只需要处理成它所需要的绑定值,就可以回显了。。。。。。