目的:往数据库添加数据,形式为:xx省/xx市/xx县 ,并在前端回显
eg:
- 在element form表单里添加
<el-form-item label="地区" prop="user_address" label-width="130px">
<el-cascader
class="widthSmall"
size="large"
:options="options"
v-model="selectedOptions"
@change="addressChange"
>
</el-cascader>
</el-form-item>
- 在data里添加
data(){
return{
options: regionData, //省市区数据
selectedOptions:[], // 选中的地区
}
}
- 在create里添加
created() {
this.selectedOptions = [this.form.provinceCode,this.form.cityCode,this.form.areaCode];
},
- 在methods里添加
methods:{
//初始化省市
addressChange(arr) {
var _this = this;
console.log(arr);
console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
_this.form.provinceCode = arr[0];
_this.form.cityCode = arr[1];
_this.form.areaCode = arr[2];
},
}
- import
import {regionData,CodeToText,TextToCode } from 'element-china-area-data'
如果没安装需要安装element-china-area-data
npm install element-china-area-data -S
完成第五步我们的级联选择器就可以使用了,现在我们来处理存数据和回显问题
- 为我们的数据库字段赋值,拼接成xx省/xx市/xx县 ,在addressChange方法里添加
CodeToText用法:CodeToText[‘110000’]输出北京市
设置完这里,我们直接上传表单就可以存选择的数据了
- 回显
在我们打开页面初始化获得数据的方法里分解数据
//分解地区信息
var index=this.userData.user_address.indexOf("\/") // "/"第一次出现的位置
var last=this.userData.user_address.lastIndexOf("\/") // "/"最后次出现的位置
//TextToCode转换成地区编码
var provinceCode=TextToCode[this.userData.user_address.slice(0,index)].code
var cityCode=TextToCode[this.userData.user_address.slice(0,index)][this.userData.user_address.slice(index+1,last)].code
var areaCode=TextToCode[this.userData.user_address.slice(0,index)][this.userData.user_address.slice(index+1,last)][this.userData.user_address.slice(last+1)].code
this.selectedOptions=[provinceCode,cityCode,areaCode]
slice用法:
let str=“我爱中国”
str.slice(1) //爱中国
str.slice(0,3) //我爱中
TextToCode用法:
TextToCode[‘北京市’].code 输出110000
TextToCode[‘北京市’][‘市辖区’].code 输出110100
TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code 输出110105
eg:
回显成功。
加:
得到树的最后一个项目的id
handleChange(val) {
const len = val.length;
this.form.id = val[len-1]
},