elementui Cascader 省市区联动选择器，应用与回显_element级联选择器 存入数据库

目的：往数据库添加数据，形式为：xx省/xx市/xx县 ，并在前端回显
eg：

1. 在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>
1
2
3
4
5
6
7
8
9
10

2. 在data里添加

data(){
    return{
options: regionData, //省市区数据
selectedOptions:[], // 选中的地区
}
}
1
2
3
4
5
6

3. 在create里添加

created() {
    this.selectedOptions = [this.form.provinceCode,this.form.cityCode,this.form.areaCode];
  },
1
2
3

4. 在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];
    },
    }
1
2
3
4
5
6
7
8
9
10
11

5. import

import {regionData,CodeToText,TextToCode } from 'element-china-area-data'
1

如果没安装需要安装element-china-area-data

npm install element-china-area-data -S
1

完成第五步我们的级联选择器就可以使用了，现在我们来处理存数据和回显问题

6. 为我们的数据库字段赋值，拼接成xx省/xx市/xx县 ，在addressChange方法里添加
   

CodeToText用法：CodeToText[‘110000’]输出北京市
设置完这里，我们直接上传表单就可以存选择的数据了

7. 回显
   在我们打开页面初始化获得数据的方法里分解数据

       //分解地区信息
        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]
1
2
3
4
5
6
7
8

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]
     
    },
1
2
3
4
5