element三级联动获取名字（字段）

最新推荐文章于 2024-04-14 18:51:25 发布

龙端刘

最新推荐文章于 2024-04-14 18:51:25 发布

阅读量529

点赞数 1

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/wssy_day/article/details/123426317

版权

下拉框组件

<el-cascader size="large" 
:options="options" 
v-model="selectedOptions" 
@change="handleChange">
</el-cascader>

引入数据

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

返回数据给组件

export default ({

    data() {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
})

转文本

methods: {
    handleChange(codeStr) {
        if (codeStr === null) {
          return null
        }
        console.log(codeStr)
        let area = ''
        switch (codeStr.length) {
          case 1:
            area += CodeToText[codeStr[0]]
            break
          case 2:
            area += CodeToText[codeStr[0]] + '/' + CodeToText[codeStr[1]]
            break
          case 3:
            area += CodeToText[codeStr[0]] + '/' + CodeToText[codeStr[1]] + '/' + CodeToText[codeStr[2]]
            break
          default:
            break
        }
        console.log(area)
        return area
      }
}

控制台打印输出