element-ui中的中国省市区级联选择器
文章目录
- 安装
- 导入
- 使用
- 效果
以下教程参考自官方的教程:https://www.npmjs.com/package/element-china-area-data
安装
- 执行以下语句安装城市数据:
npm install element-china-area-data -S
导入
- 以vue-cli创建的项目为例,在vue文件中的scrit标签内导入数据:
import { regionData, CodeToText } from "element-china-area-data";
使用
- 如下代码所示:
<template><div id="app"><div><el-cascadersize="large":options="options"v-model="selectedOptions"@change="handleChange"></el-cascader></div></div>
</template><script>
import { regionData, CodeToText } from "element-china-area-data";export default {name: "app",data() {return {options: regionData,selectedOptions: []};},methods: {handleChange() {var loc = "";for (let i = 0; i < this.selectedOptions.length; i++) {loc += CodeToText[this.selectedOptions[i]];}alert(loc);}}
};
</script>
效果
参考链接
element-ui中的中国省市区级联选择器相关推荐
- element UI中的select选择器的change方法需要传递多个值
如上图是element UI的一个基本的select选择器 根据element UI的官网事件调用,有一下几种: 如果直接调用上述事件,不传任何参数,则可以获取到当前选中的值(因为默认会将event参 ...
- Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
- Web前端笔记-修改element ui中表格样式(透明、去横纵线等含修改思路)
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题 原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
- Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...
- 修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
- element ui中的el-dropdown(下拉框)防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题 当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
最新文章
- 理解JSON对象:JSON.parse、 JSON.stringify
- 暗通道优先的图像去雾算法(上)
- 获取含跨域网址的框架网页的源码
- Linux C++写日志
- 《嵌入式Linux与物联网软件开发——C语言内核深度解析》一2.4 位运算构建特定二进制数...
- 从决策树到xgboost(二)
- html6与html5的区别,XHTML和HTML5的区别
- spring 3.0.5+velocity tools 2.0
- 计算机毕业设计中民宿平台信息管理系统设计
- 在远程登录时绕过SSL验证的方法
- 东风风神汽车4S店管理系统
- CVE-2018-0798_微软公式编辑器漏洞分析
- MPa和psi,bar压力单位换算成公斤
- python爬取微博评论点赞数_python爬取点赞评论数
- 华硕笔记本电脑开机进入bios
- 颜色不透明度 对应表
- tushare更新,get_k_data支持分时k线数据,可替代以前的get_hist_data
- 牛客网直通BAT面试算法精讲课优惠码
- 内存分析工具LeakCanary是如何工作的
- mysql自动生成id方式_Mysql全局ID生成方法
热门文章
- asp调用php函数,asp函数split()对应php函数explode()
- java documentlistener_java在DocumentListener中更改文档
- php源代码压缩,PHP_PHP 源代码压缩小工具,使用方法:(在命令行运行) 复 - phpStudy...
- Py之featuretools:featuretools库的简介、安装、使用方法之详细攻略
- CV之detectron2:detectron2的简介、安装、使用方法之详细攻略
- Py之easygui:easygui的简介、安装(最正确安装)、使用方法之详细攻略
- 【构建之法教学项目】一个简单的基于C#的电子商务系统演练场景的代码示例...
- 多线程学习笔记一之内置锁
- 如何代替set get方法
- Java 关于File使用