iview组件select之默认展示label,并传空value做方法入参
要求: 默认查询操作日期在当日的数据;(打开页面时默认选中时间、全部)
后台约定:选定“全部”这个条件,传的值是空""
综上:使用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做方法入参的更多相关文章
- 给iview组件select设置默认值
1.首先,给select加一个v-model,如: <Select v-model="exam_name" > <Option v-for="(item ...
- iview组件select无法手动设置值
听小伙伴说iview的作者已经修复这个bug了,因为我们的组件库是copyiview后修改的,所以没有更新代码 这里提供一个方法 <i-select :ref="'signSlectR ...
- iView之select获取value和label
使用:label-in-value="true" @on-change="obtainValue" 详见官方文档:https://www.iviewui.com ...
- iview 组件的额外传参问题记录
在使用iview组件的时候,经常遇到额外传参的问题,一般情况下可以使用以下2种方法都可以解决: 1.直接在方法后面输入参数,有的时候借用$event获取当前dom信息,在某些特定情况下可以将参数绑定在 ...
- element UI select 设定默认值
要为select设定默认值,有两个步骤 1.数据中,声明一个变量param:该变量的值设为你想设定的select option中value 2.控件的 v-model 绑定 param 即可 < ...
- select()事件默认选中文本框的全部内容,并改变其背景色和文字颜色
1.select()事件默认选中文本框的全部内容 拿到input标签的节点,调用select()方法即可.但是我做的vue项目中调用了此方法有一个bug,单次点击会全选内容,双次点击的时候全选会闪一下 ...
- vue中select设置默认选中
vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...
- IVIEW组件的render方法在Table组件中的使用
后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址: https://gitee.com/wlovet/table-project 一.Rende ...
- [技术博客]iview组件样式踩坑记录
[技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注 ...
随机推荐
- Linux系统初始化流程
POST-->BIOS(Boot Sequence)-->MBR(bootloader)-->Kernel(initrd)-->/sbin/init(/etc/inittab) ...
- HTML--2图片热点,网页划区,拼接,表单
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 网页的拼接: 在一个网络 ...
- PHP、AJAX综合练习(增、删、改、查、分页、模糊查询)
先来几张效果图 主页面分页显示: 关键字查询,关键字描红 添加数组,弹出窗口,点击保存,再不刷新页面的同时添加到网页数据 修改界面:弹出窗口,文本框中保留点击的车辆的原始信息 主页面代码 <me ...
- 【BZOJ2096】[Poi2010]Pilots 双指针+单调队列
[BZOJ2096][Poi2010]Pilots Description Tz又耍畸形了!!他要当飞行员,他拿到了一个飞行员测试难度序列,他设定了一个难度差的最大值,在序列中他想找到一个最长的子串, ...
- 【BZOJ2843】极地旅行社 离线+树链剖分+树状数组
[BZOJ2843]极地旅行社 Description 不久之前,Mirko建立了一个旅行社,名叫“极地之梦”.这家旅行社在北极附近购买了N座冰岛,并且提供观光服务.当地最受欢迎的当然是帝企鹅了,这些 ...
- ubuntu删除文件夹
-r表示强制删除,-f表示不提示 强制删除文件夹并提示 sudo rm -r 文件夹名 强制删除文件夹不提示 (最暴力) sudo rm -rf 文件夹名
- PopupWindow 实现 查看所有手机应用弹出框
public class MainActivity extends Activity implements OnItemLongClickListener, OnClickListener { pri ...
- media server died的解决方法【转】
本文转载自:https://blog.csdn.net/class_brick/article/details/78086261 在对MediaRecord进行初始化时添加上 mMediaRecord ...
- 疑难杂症:“代理 XP”组件已作为此服务器安全配置的一部分被关闭。系统管理员可以使用 sp_configure 来启用“代理 XP”。
“代理 XP”组件已作为此服务器安全配置的一部分被关闭.系统管理员可以使用 sp_configure 来启用“代理 XP”.有关启用“代理 XP”的详细信息,请参阅 SQL Server 联机丛书中的 ...
- 勤于思考:jQuery Validation 在IE7(兼容模式)下出现“找不到成员”的脚本错误
今天在调试IE10下使用IE6判断脚本出现错误,处理后说IE7也不行,调试后则会出现以下错误: SCRIPT3: 找不到成员. jquery171.js, 行2582 字符4 其实开始我认为是jque ...