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: '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();  //調接口的方法
      },

 

 效果如圖：