mint-ui 做省市选择组件
省市的数据是动态的,其实不是动态的更好搞
<!-- 省市选择 -->
<mt-popup
v-model="popupVisible"
position="bottom" class="lx-popup" >
<mt-picker :slots="addressSlots" value-key="name" @change="onAddressChange" :visible-item-count="3" ></mt-picker>
</mt-popup>
import { Toast, Indicator, Picker, Popup } from 'mint-ui'
popupVisible: false,
addressSlots: [],
methods:{
openCity () {
this.popupVisible = true
Indicator.open('正在获取数据...')
},
onAddressChange (picker, values) {
for (let i = 0; i < this.getAllAddress.length; i++) {
if (values[0].id === this.getAllAddress[i].id) {
this.privince = values[0].name
picker.setSlotValues(1, this.getAllAddress[i].cities)
break
}
}
if (values[0] !== values[1]) {
this.addressFalse = [{ province: values[0], city: values[1] }]
} else {
this.addressFalse = [{ province: values[0], city: values[1] }]
}
this.city = values[0].name
this.searchData.city = this.city
this.getStatistics()
}
}
}
created () {
mapCityNew().then(res => {
if (this.department.codeNo === '全部') {
this.searchData.teamCode = ''
}
if (res.status === 200) {
Indicator.close()
this.getAllAddress = res.data.data
this.addressSlots = [
{
flex: 1,
values: this.getAllAddress,
className: 'slot1',
textAlign: 'center'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['广州'],
className: 'slot3',
textAlign: 'center'
}
]
} else {
Toast({
message: res.data.message || '数据获取失败',
iconClass: 'icon icon-warning',
duration: 3000
})
}
})
},
一开始可以在created里面去获取数据
value-key="name"表示获取的动摇数据的名字是name
mint-ui 做省市选择组件的更多相关文章
- vuetify,vux,Mint UI 等框架的选择
vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...
- Vue移动组件库Mint UI的安装与使用
一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件(share)
官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- vue mint ui 手册文档
npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...
- JS组件系列——不容错过的两款Bootstrap Icon图标选择组件
前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...
随机推荐
- BUAAOO-Third-Summary
目录 从DBC到JML SMT solver 使用 JML toolchain的可视化输出 和我的测试结果 规格的完善策略 架构设计 debug情况 心得体会 一.从DBC到JML 契约式设计(Des ...
- pytest用例传参的多种方式
1.接收外部传参 *函数获取需要的参数,再传入 *函数获登录信息,直接使用 2.其它方式传参 *依据dict取值 *tuple数组
- font-size 你所不知道的值
说起 font-size ,大家应该都知道是做什么的: CSS 属性指定字体的大小.因为该属性的值会被用于计算em和ex长度单位,定义该值可能改变其他元素的大小. 那么font-size 的值也是多 ...
- CentOS下安装mysql-server提示No package mysql-server avaliable
出现这个原因是CentOS使用mariadb-server代替掉了mysql-server,因此如果想使用mysql-server需要先更新仓库地址,使用以下命令: wget http://repo. ...
- Jwt Token 令牌
/* 采用JWT的生成TOKEN,及APP登录Token的生成和解析 */ public class JwtTokenUtil { /** * token秘钥 */ public static fin ...
- python3 中的try 异常调试与 raise 异常抛出
一.什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常. 异常是Python对象,表示一个错误. 当Py ...
- 老毛桃制作U盘-linux
使用老毛桃制作ubuntu启动镜像 选择ISO模式 开始制作 模拟启动 制作完成,模拟启动测试.出现如下错误: Failed to load ldlinux.c32 Boot failed: plea ...
- Lerp
Lerp,就是返回两个值之间的插值,一般有三个参数.第一个参数为初始值,第二个参数为最终值,插值为0~1d的一个浮点数值,为0时为初始值,1时为最终值,为0到1之间的数值时返回一个混合数值.若第三个参 ...
- p3.BTC-协议
数字货币是文件,难伪造,但是容易复制,不像实体货币,花出去就没了,数字货币存在double spending attack,双花攻击. 去中心化的货币,需要解决两个问题: 1.货币的发行 挖矿 2.交 ...
- oracle命令行导出、导入dmp文件
1.导出语句: exp test/test@127.0.0.1:1521/orcl file=d:\gpmgt.dmp full=n: 导出test用户数据库对象,full=n表示默认只导出test用 ...