2020 Vue 基于Element-UI开发 实现省市区县数据联动效果(附数据js文件)

1、引言

寒假是用来反超的!一起来学习Vue把,这篇博客是关于实现省市区县数据联动效果,请多指教~

2、实现省市区县数据联动效果

其中包含一个核心文件,我用网盘给大家,下载之后放在你所需要的项目包里即可
在这里插入图片描述
链接:https://pan.baidu.com/s/1ojrVpcKgObtb1Sh-ydRPKw
提取码:nbra

实现效果如下图:

在这里插入图片描述
首先,我们需要对文件在界面处理模块script里面进行导入,路径这里是我放的包路径,不同的话可能需要修改一下,然后在data里面定义我们的数据对象

import cityData from './citydata.js'

在这里插入图片描述
以下是基于Element-UI的级联选择器的使用,options绑定我们的数据源,也就是我们刚刚定义的cityData
在这里插入图片描述
以下是界面主要源码(简单看一下就好了,关键点在于上面这张图):

    <!--添加角色的对话框-->
        <el-dialog
            title=
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一百个Chocolate

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值