资讯专栏INFORMATION COLUMN

使用vue+element ui 实现省市区三级联动

netScorpion / 740人阅读

摘要:使用实现省市区三级联动开发工具使用技术效果图如下话不多说上代码一,页面部分二,部分首先引入以下代码注意引入上方代码之前需先运行下方代码进行安装然后再写入以下代码这样一个省市区三级联动的下拉列表就完成了

使用vue+element ui 实现省市区三级联动

开发工具 Hbuilder x
使用技术vue2+Element ui

效果图如下???

话不多说 上代码?

一,页面部分

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

二,script部分

首先引入以下代码

import { regionData } from "element-china-area-data"

注意!!! 引入上方代码之前 需先运行下方代码进行安装

npm install element-china-area-data -S

然后再写入以下代码

export default {	    data () {	      return {	        city: regionData,	        selectedOptions: []	      }	    },		    methods: {	      handleChange (value) {	        console.log(value)	      }	    }	  }	  

这样一个省市区三级联动的下拉列表就完成了

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/122998.html

相关文章

  • vue项目中使用element-ui下拉框选项值为对象时报错

    摘要:在做后台管理时,使用了搭配,请求方法使用了插件,在使用下拉框时,因为我需要获取选中的选项中的其他值,因此需要传入对象。 在做后台管理时,使用了vue搭配elementUI,请求方法使用了axios插件,在使用下拉框时,因为我需要获取选中的选项中的其他值,因此需要传入对象。对select下拉框的文档没有读的很仔细,百度过几篇文章,也没有理解他们表达的意思,然后自己又去看文档,把他的属性看...

    Drummor 评论0 收藏0
  • vue 市区三级联动插件v-distpicker

    摘要:十分便捷的三级联动插件官网步骤下载步骤使用与引入在中注册全局组件在文件中使用组件你需要用到三级联动的页面的里如何使用组件在该文件的部分写广东省广州市海珠区移动端步骤如何获取他们的数据给部分一个点击事件在配置 十分便捷的三级联动插件 官网:https://www.awesomes.cn/repo/... 步骤1:下载 npm install v-distpicker --save O...

    learning 评论0 收藏0
  • 小白成长日记:写个市区三级联动

    摘要:数据来源台湾缺省完成图初始化选完省之后部分请选择请选择暂无数据暂无数据一开始的初始状态是省份可以选择,利用来控制市和区的现实选项。当省份未选择时,市区因为没有数据,所以会选择暂无数据。 依旧使用vue,不需要关注dom太方便了。数据来源(台湾缺省):https://github.com/airyland/c... 完成图 初始化 showImg(https://segmentfault...

    JerryC 评论0 收藏0
  • Vue.js资源分享

    摘要:中文官网英文官网组织发出一个问题之后,不要暂时的离开电脑,如果没有把握先不要提问。珍惜每一次提问,感恩每一次反馈,每个人工作还是业余之外抽出的时间有限,充分准备好应有的资源之后再发问,有利于问题能够高效质量地得到解决。 Vue.js资源分享 更多资源请Star:https://github.com/maidishike... 文章转自:https://github.com/maid...

    vpants 评论0 收藏0
  • 原生js实现市区三级联动插件

    原生js实现省市区三级联动插件 前言 插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star ? 仓库地址在线预览 准备 // 页面上先引入css与js文件 页面中的容器标签不限制,只需给个id就行 var address = new Address({ wrapId: wrap, showArr...

    mumumu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<