要求: 默认查询操作日期在当日的数据;(打开页面时默认选中时间、全部)

后台约定:选定“全部”这个条件,传的值是空""

综上:使用select选择框的v-model绑定数据,使用:value :label 展示默认数据 ,数组和单个字段。

遇到的问题:

直接在data里面定义{value: '',label: '全部'}失败,当下拉点全部的时候,因为value是空,所以选择框里点“全部”时选不上。传值到接口也失败了。

所以,先赋值value为0,给接口包一层,先判断入参值是否为0,若是,则赋个空给这个入参即可。

代码如下:

<template>
<FormItem label="操作日期:" prop="dates">
<!---->
<DatePicker type="datetimerange" placeholder="Select date"
style="width: 100%" :value="[this.startDate,this.endDate]">
</DatePicker>
</FormItem>
FormItem label="功能:" prop="name">
<Select v-model='category' :label="this.funList[0].label">
<Option
v-for='item in funList'
:value='item.value'
:key='item.value'>
{{item.label}}
</Option>
</Select>
</FormItem>
<FormItem class="inline-submit">
<Button type="primary" @click="clickMethod()">查询</Button>
</FormItem>
</template> data:
category: '',
funList: [
{
value: '',
label: '全部'
},
{
value: '',
label: '变更aa'
}] created() {
this.startDate = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
this.endDate = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'); }, methods: //点击查询事件
clickMethod() {
if (this.category === '') {
this.category = '';
}
this.terminalOperLogList(); //调接口的方法
},

效果如图:

iview组件select之默认展示label,并传空value做方法入参的更多相关文章

  1. 给iview组件select设置默认值

    1.首先,给select加一个v-model,如: <Select v-model="exam_name" > <Option v-for="(item ...

  2. iview组件select无法手动设置值

    听小伙伴说iview的作者已经修复这个bug了,因为我们的组件库是copyiview后修改的,所以没有更新代码 这里提供一个方法 <i-select :ref="'signSlectR ...

  3. iView之select获取value和label

    使用:label-in-value="true" @on-change="obtainValue" 详见官方文档:https://www.iviewui.com ...

  4. iview 组件的额外传参问题记录

    在使用iview组件的时候,经常遇到额外传参的问题,一般情况下可以使用以下2种方法都可以解决: 1.直接在方法后面输入参数,有的时候借用$event获取当前dom信息,在某些特定情况下可以将参数绑定在 ...

  5. element UI select 设定默认值

    要为select设定默认值,有两个步骤 1.数据中,声明一个变量param:该变量的值设为你想设定的select option中value 2.控件的 v-model 绑定 param 即可 < ...

  6. select()事件默认选中文本框的全部内容,并改变其背景色和文字颜色

    1.select()事件默认选中文本框的全部内容 拿到input标签的节点,调用select()方法即可.但是我做的vue项目中调用了此方法有一个bug,单次点击会全选内容,双次点击的时候全选会闪一下 ...

  7. vue中select设置默认选中

    vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...

  8. IVIEW组件的render方法在Table组件中的使用

    后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址:  https://gitee.com/wlovet/table-project 一.Rende ...

  9. [技术博客]iview组件样式踩坑记录

    [技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注 ...

随机推荐

  1. HDU 5379 Mahjong tree(树的遍历&amp;组合数学)

    本文纯属原创,转载请注明出处.谢谢. http://blog.csdn.net/zip_fan 题目传送门:http://acm.hdu.edu.cn/showproblem.php? pid=537 ...

  2. EasyDSS RTMP流媒体服务器是怎样炼成的:Easy而且更加互联网!

    开发EasyDSS的初衷 自从12年开始做EasyDarwin的时候,当时眼光一直都仅仅局限在安防监控视频这一块,对RTMP没有太大的重视,对于后起之秀HLS更是没有太多关注,然而经历了15直播火热的 ...

  3. EasyNVR无插件流媒体服务器前端技术防止重复提交的方法

    现在随着接触EasyNVR时间越来越长,越发的觉得EasyNVR真的是一个"神器".从功能上来说自身不仅可以拉出来使用(具体功能搜索EasyNVR一定有惊喜!),也可以作为设备端与 ...

  4. cmake是什么

    1 cmake是什么 cmake是一个管理软件build过程的工具.它并不会直接build处软件可执行文件本身,而是build出可以build出软件本身的全部工程文件,比如makefiles.xcod ...

  5. Delphi String的散漫记录,真是知识无数,陷阱无数

    真是膜拜Delphi C++ Builder编译器的作者们,要下多少苦功夫才能解决如此之多的问题,制造出一个神级作品给世人享用.另外以我的编程经验所能想到很麻烦但却是必须的还有两个地方,一个是Form ...

  6. 我的Android进阶之旅------>真正在公司看几天代码的感触

    仅以此文来回顾这一周我的工作情况,以及由此而触发的感想. ============================================================= 来到新公司5天了, ...

  7. 流畅python学习笔记:第十二章:子类化内置类型

    子类化内置类型 在python2.2之后,内置类型都可以子类化,但是有一个注意事项:内置类型不会调用用户定义的类覆盖的特殊方法.这个说起来比较绕口,什么意思呢.我们来看下下面的代码: class Do ...

  8. WordPress用户角色及其权限管理编辑插件:User Role Editor汉化版

    如果Wordpress默认的用户角色及权限不能满足您的需求,又觉得修改代码编辑用户权限太麻烦.那不妨试试User Role Editor,Wordpress用户角色及其权限管理编辑插件. User R ...

  9. sap crm 常用表

    [转自 http://blog.csdn.net/zhongguomao/article/details/6714616] SAP CRM 参数文件集目标组常用表: CRMD_MKTTG_TG_T C ...

  10. Kaggle系列1:手把手教你用tensorflow建立卷积神经网络实现猫狗图像分类

    去年研一的时候想做kaggle上的一道题目:猫狗分类,但是苦于对卷积神经网络一直没有很好的认识,现在把这篇文章的内容补上去.(部分代码参考网上的,我改变了卷积神经网络的网络结构,其实主要部分我加了一层 ...