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 @   小小兴  阅读(142)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示