element table列表项展示省市区

使用的省市区插件 npm install element-china-area-data -S

//引用

import { 
   provinceAndCityData,
   regionData,
   provinceAndCityDataPlus, 
   regionDataPlus,
   CodeToText,
   TextToCode 
}from 'element-china-area-data';

//绑定formatter的方法 
<el-table-column align="center" :formatter="getProvince" />

<el-form-item label="行政区划" prop="areaOptions">
  <el-cascader style="width: 100%"  :options="options" v-model="form.areaOptions" @change="addressChoose"></el-cascader>
</el-form-item>

 //在methods使用方法
getProvince(row,colum){ //转码
  if(row.areac && row.areac) {
    return CodeToText[row.areac] +'-'+ CodeToText[row.area];
  }
},
addressChoose(value) { //选中值发生变化
  this.form.areaOptions = [value[0],value[1]]
 },
posted @ 2023-07-24 16:36  小小兴  阅读(119)  评论(0编辑  收藏  举报