// html

<div v-if="dataList">
<mt-popup v-model="popupVisible" position="bottom" class="mint-popup" style="width: 100%;height: 30%;">
<mt-picker :slots="dataList" @change="onDateChange" :visible-item-count="5" :show-toolbar="false" ref="picker" value-key="name"></mt-picker>
</mt-popup>
</div>

  

data(){
popupVisible:false, // 默认隐藏
a:0, // 设置一个标识
} value-key="name" 必须与option[{name:''}] 一致
computed: {
dataList () {
if(this.a === 0 || this.a === 1 || this.a === 4 || this.a === 5 || this.a === 6 || this.a === 7 || this.a === 8 || this.a === 9 || this.a === 10 || this.a === 11 || this.a === 12 || this.a === 13 || this.a === 16){
this.dateSlots = [
{
flex: 1,
values: this.tagList,
className: 'slot1',
textAlign: 'center'
}
];
}else if(this.a===3){
this.dateSlots = [
{
flex: 1,
values: [1,2,3,4,5,6,7,8,9],
className: 'slot2',
textAlign: 'right'
}, {
flex: 1,
values: [0,1,2,3,4,5,6,7,8,9],
className: 'slot4',
textAlign: 'center'
}, {
flex: 1,
values: [0,1,2,3,4,5,6,7,8,9],
className: 'slot4',
textAlign: 'left'
}
]
}
return this.dateSlots ;
},
},
// 多列与单列并存 ,点击事件去控制a
showPopupVisible(index){
this.popupVisible = true ;
this.openTouch();
if(index === 0){
this.a = 0
this.tagList = this.createData.publishType.attrValues;
}else if(index === 1){
this.a = 1 ;
this.tagList = this.createData.rentalType.attrValues;
}
}
// 拿到name和对应的id 传给后端
onDateChange (picker, values) {
console.log(picker)
console.log(values)
if(values[0]){
if(this.a === 0){
this.value0 = values[0].name;
this.valueId0 = values[0].id ;
}else if(this.a === 1){
this.value1 = values[0].name;
this.valueId1 = values[0].id ;
}
}

vue-cli 中多个组件共用一个mt-checklist的更多相关文章

  1. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  2. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  3. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...

  4. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  5. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  6. 【Blazor】在ASP.NET Core中使用Blazor组件 - 创建一个音乐播放器

    前言 Blazor正式版的发布已经有一段时间了,.NET社区的各路高手也创建了一个又一个的Blazor组件库,其中就包括了我和其他小伙伴一起参与的AntDesign组件库,于上周终于发布了第一个版本0 ...

  7. 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况

    在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...

  8. vue项目中使用地图组件

    一.引入高德地图 一般用使用vue-cli webpack最简单粗暴的引入地图api的方法就是,在入口index.html的头部直接引入,记得一定要带上key,如果没有的话去高德地图api的官网申请一 ...

  9. scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

    css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.confi ...

随机推荐

  1. 不小心执行了 rm -f,先别急着跑路

    作者:justmine http://www.cnblogs.com/justmine/p/10359186.html 前言 每当我们在生产环境服务器上执行rm命令时,总是提心吊胆的,因为一不小心执行 ...

  2. uWSGI、WSGI、uwsgi、wsgiref、werkzeug

    WSGI WSGI:全称是Web Server Gateway Interface,WSGI不是服务器,也不是python模块.框架.API或者任何软件,只是一种规范,描述web server如何与w ...

  3. 详解 CSS 绝对定位

    基本定义和用法 在 CSS 中,position 属性指定一个元素(静态的,相对的,绝对或固定,以及粘性定位)的定位方法的类型. 当设置 position 属性的值为 absolute 时,生成绝对定 ...

  4. PTA 紧急救援 /// dijkstra 最短路数 输出路径

    题目大意: 给定 n m s t :表示n个点编号为0~n-1 m条边 起点s终点t 接下来一行给定n个数:表示第i个点的救援队数量 接下来m行给定u v w:表示点u到点v有一条长度为w的边 求从s ...

  5. elk 解决浏览器跨域问题

    1.执行命令: docker pull sebp/elk 将镜像pull到本地来: 2.执行命令: docker run -p 5601:5601 -p 9200:9200 -p 5044:5044 ...

  6. vs2010管理员运行

    VS2010  Configuation->Linker->Manifest File->UAC Execution Level-> requireAdministrator

  7. 小鱼易连 for mac如何使用?小鱼易连 mac版使用教程

    小鱼易连 for mac如何使用?小鱼易连 mac版是参加远程会议人士的首选,高效极致,简单流畅,视频流畅,语音清晰,无需专用网络的功能深受用户的喜欢,它提供的文件和电脑的共享,让你的会议更加高效.下 ...

  8. AcWing 243. 一个简单的整数问题2 (树状数组)打卡

    题目:https://www.acwing.com/problem/content/244/ 题意:区间加,区间查询 思路:我们把原先那个差分数组分解一下 ∑i=1x∑j=1ib[j]=∑i=1x(x ...

  9. 如何编写高性能的 javascript

    一.Javascript代码执行效率1. DOM1.1 使用 DocumentFragment 优化多次 append说明:添加多个 dom 元素时,先将元素 append 到 DocumentFra ...

  10. 20175213 2018-2019-2 《Java程序设计》第10周学习总结

    Java内存模型 主内存与工作内存 Java内存模型主要目标:定义程序中各个变量的访问规则,即在虚拟机中将变量存储到内存和从内存中取出变量这样的底层细节.此处的变量(Variable)与Java编程中 ...