// 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. smb.conf免密登录文件

    # This is the main Samba configuration file. You should read the# smb.conf(5) manual page in order t ...

  2. Introduction to Object-Oriented JavaScript 转载自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

    Introduction to Object-Oriented JavaScript IN THIS ARTICLE JavaScript review Object-oriented program ...

  3. Java面试宝典(3)Java基础部分

    51.启动一个线程是用run()还是start()? . 启动一个线程是调用start()方法,使线程就绪状态,以后可以被调度为运行状态,一个线程必须关联一些具体的执行代码,run()方法是该线程所关 ...

  4. RabbitMQ 在 Win10 环境下的安装与配置

    1 RabbitMQ 环境配置 1.1 ErLang 下载安装     RabbitMQ 需要 ErLang 环境支持:首先下载 ErLang 并安装.     建议使用新版本,版本过低存在与 Rab ...

  5. vue自定义组件添加原生事件监听

    注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...

  6. tf.add_to_collection,tf.get_collection简介

    tf.add_to_collection:把变量放入一个集合,把很多变量变成一个列表 tf.get_collection:从一个结合中取出全部变量,是一个列表 tf.add_n:把一个列表的东西都依次 ...

  7. mysql基于Altas读写分离并实现高可用

    实验环境准备: master:192.168.200.111 slave1:192.168.200.112 slave2:192.168.200.113 Altas:192.168.200.114 c ...

  8. The Preliminary Contest for ICPC Asia Xuzhou 2019 I J

    I. query 题意:给出n的一个排列,有m个询问[l,r],询问[l,r]直接有倍数关系的pair个数. 解法:比赛完之后听说是原题,但是我没做过呀,做题太少了qwq.首先因为数字是1-n的,所以 ...

  9. Java访问数组

    package java03; /* 使用动态初始化数组的时候,其中的元素会自动拥有一个默认值,规则如下: 如果是整数类型,默认为0 如果是浮点类型,默认为0.0 如果是字符类型,默认为'\u0000 ...

  10. UVA1411 Ants

    想出的一道题竟然是原题QAQ 非常有趣的一个题 根据三角形两边之和大于第三边 所以相交的线段一定是比不相交的线段要长的 所以直接二分图构图 最小费用最大流即可 (我不管我不管我要把这个出到NOIP膜你 ...