// 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. f-strings格式化输出

    python3.6后加入标准库的格式化输出新的写法 不区分大小写,f,F都可以 可以加入表达式 s1 = 'haha' s = f'python{s1.upper()}' l1 = ['小明', 18 ...

  2. 一、python基础之字符串的处理

    最近开始重新回过头来巩固一下python的基础知识,并在此做一些记录以便未来更好的回顾 一.字符串的大小写转换 title() 使用title()方法可以将字符串中每个单词的首字母大写 name = ...

  3. Neo4j百万级数据导入只需30s

    先上图:425万nodes.180万relationships只用了30s 243ms 项目需要生成关系图,开始考虑的是用Neo4j官网提供的REST API,从solr中查出2组数据先创建节点再创建 ...

  4. 讲真,下次打死我也不敢随便改serialVersionUID了

    讲真,下次打死我也不敢随便改serialVersionUID了 码农沉思录 码农沉思录 微信号 code-thinker 功能介绍 笔者为国内某知名企业不知名码农,专注Java Web领域多年,有丰富 ...

  5. Ubuntu中实现Docker内安装jenkins+jenkins远程触发

    前面做了在ubuntu中安装jenkins+docker实现自动部署,但是得安装jdk8+tomcat8环境,比较麻烦,因此本文记录如何将jenkins直接装在dockers内并且实现远程触发功能. ...

  6. go语言从例子开始之Example19.接口

    接口 是方法特征的命名集合. Example: package main import "fmt" //让方法,实现api这个接口. type api interface{ get ...

  7. 第10篇用 ConfigMap 管理配置

        一.ConfigMap介绍管理配置: ConfigMap介绍 Secret 可以为 Pod 提供密码.Token.私钥等敏感数据:对于一些非敏感数据,比如应用的配置信息,则可以用 Config ...

  8. Spring整合Struts2的配置与测试

    整合目的 让Spring的IOC容器管理Struts2的Action 整合步骤 1.新建一个Web项目 2.加入Spring的jar包和添加Spring的配置文件 3.在Web.xml中配置Conte ...

  9. NFA 、DFA 简述

    转载请注明出处 https://www.cnblogs.com/majianming/p/11823697.html 目前常见的正则表达引擎总体分为2种,DFA (确定型有穷状态自动机) 和 NFA ...

  10. 四轴遥控器ADC部分

    一.ADC参考手册学习 A/D转换可以按单次.连续设置采样:可以一一扫描或间断的对多个ADC通道进行采集. ADC的结果有左对齐和右对齐. ADC的输入时钟不得超过14Mhz,它是由PCLK2经分频产 ...