iview组件select之默认展示label,并传空value做方法入参

2019/04/21 12:25
阅读数 52
要求: 默认查询操作日期在当日的数据;(打开页面时默认选中时间、全部)

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

综上:使用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: '0',
            label: '全部'
          },
          {
            value: '1',
            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 === '0') {
          this.category = '';
        }
        this.terminalOperLogList();  //调接口的方法
      },

 

 效果如图:

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部