……

element-ui 城市选择组件

Posted on 2022-08-22 13:44  WALL*E  阅读(161)  评论(0)  编辑  收藏  举报 
<el-cascader
  size="large"
  :options="options"
  placeholder="请选择地区"
  expand-trigger="hover"
  ref="cascaderAddr"
  v-model="selectedOptions"
  @change="handleChange">

created(){
  if(this.area){
    this.selectedOptions = this.area.split(',');//显示在输入框中
  }
},
handleChange(value) {
  let selectedOptions = value
  var code = ''
  // selectedOptions.map(item => name += CodeToText[item] + '') //将省市区三个拼接一起
  selectedOptions.map(item => code += item + ',') //将省市区三个拼接一起
  this.area = code.slice(0,code.lastIndexOf())//省市区的编码需要存到数据库，下次进来获取到
  this.address = CodeToText[selectedOptions[0]] + ',' + CodeToText[selectedOptions[1]] + ',' + CodeToText[selectedOptions[2]]//保存到数据库的字符串如：北京市,市辖区,东城区
    },