Vue+ElementUI Cascader 级联选择器省市区修改回显

最新推荐文章于 2024-05-09 09:54:13 发布

可爱的橙子大爷

最新推荐文章于 2024-05-09 09:54:13 发布

阅读量780

点赞数

分类专栏：小吴的前端分享文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_42337801/article/details/130369740

版权

小吴的前端分享专栏收录该内容

64 篇文章 1 订阅

订阅专栏

安装

npm install element-china-area-data -S

使用


<el-cascader ref="cascader" v-model="valueAddress" :options="options" @change="handleChange"></el-cascader>

import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
...
data:{
   valueAddress:{},//回显数据
   form:{}
}
....
// 监听选择
    handleChange(value) {
      // let cityValues = this.$refs["cascader"].getCheckedNodes()[0].pathLabels
      this.form.provinceName = CodeToText[value[0]]
      this.form.cityName = CodeToText[value[1]]
      this.form.areaName = CodeToText[value[2]]
    },
    // 回显编码
     handleUpdate(row) {
      this.reset();
      this.open = true
      this.form = row
      this.valueAddress = [TextToCode[row.provinceName].code, TextToCode[row.provinceName][row.cityName].code, TextToCode[row.provinceName][row.cityName][row.areaName].code]
    },