首页 > 其他分享 >vue element ui 使用el-cascader实现城市选择

vue element ui 使用el-cascader实现城市选择

时间:2022-12-03 17:55:05浏览次数:48  
标签:选项 el vue area value element 联动 data

安装依赖

cnpm install element-china-area-data -S

说明

provinceAndCityData是省市二级联动数据(不带“全部”选项)
regionData是省市区三级联动数据(不带“全部”选项)
provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)
regionDataPlus是省市区三级联动数据(带“全部”选项)
"全部"选项绑定的value是空字符串""
CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText['110000']输出北京市
TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105

省市区三级联动(不带“全部”选项)

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

<script>
  import { regionData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },

    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

省市区三级联动(带“全部”选项)

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

<script>
  import { regionDataPlus } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionDataPlus,
        selectedOptions: []
      }
    },

    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

省市二级联动(带“全部”选项):

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

<script>
  import { provinceAndCityDataPlus } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: provinceAndCityDataPlus,
        selectedOptions: []
      }
    },

    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

省市二级联动(不带“全部”选项)

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

<script>
  import { provinceAndCityData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: provinceAndCityData,
        selectedOptions: []
      }
    },

    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

标签:选项,el,vue,area,value,element,联动,data
From: https://www.cnblogs.com/guozhiqiang/p/16948458.html

相关文章

  • Vue 中 props配置项
    Vue中props配置项1:props配置项说明<!--##props配置项1.功能:让组件接收外部传过来的数据2.传递数据:```<Demoname="xxx"/>```3.接收数据:1.第一种方式(......
  • Vue3
    Vue3setup()和ref()的使用ref()这是vue3声明变量的方式,并且在setup()中return返回出去才可以在页面中使用。vue2声明的变量需要放在data中声明使用。vue2......
  • ant-design-vue
    vue3引入ant-design-vueUI组件安装npmi--saveant-design-vue@next-S在main.js全局引入importAntdfrom'ant-design-vue';import'ant-design-vue/dist/an......
  • vue
    安装安装nodejs环境命令行npminstall-g@vue/cli创建项目vuecreate<project>安装依赖cd<project>npminstall运行项目npmrunserve配置......
  • 从头再学Vue
    第一篇章动态绑定多个值如果有想这样的一个包含多个attribute的JavaScript对象:constobj={id:'container',class:"wrap"}可以通过不带参数的v-bind将这些att......
  • 全局引入element-plus/icons-vue
    安装npminstall@element-plus/icons-vuemain.js...import*asElementPlusIconsVuefrom'@element-plus/icons-vue'for(const[key,component]ofObject.entr......
  • @FileLimit – AOP最佳实践:上传文件大小限制
    @FileLimit结构分析   1、FileLimitUnit定义枚举:文件的单位publicenumFileLimitUnit{KB,MB,GB}2、定义注解importorg.springframework.core.a......
  • Vue 中的 Ref
    Vue中的Ref1:ref说明<!--##ref属性1.被用来给元素或子组件注册引用信息(id的替代者)2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实......
  • Hello world!
    大家好!我是练习时长114514年的......(等下跑题了)我是大爱无疆。我的Minecraft基岩版好友是:BureelSum191826我的网易版名字是:申二二我的bilibili是:密客小村民感谢大家......
  • select、poll、epoll之间的区别
    (1)select==>时间复杂度O(n)它仅仅知道了,有I/O事件发生了,却并不知道是哪那几个流(可能有一个,多个,甚至全部),我们只能无差别轮询所有流,找出能读出数据,或者写入数据的流,对他们......