Select選擇一項無法選中的問題

極少情況下會出現(xiàn)這個問題，可以試試@change="$forceUpdate()"。

bug原因我不清楚，但能解決就好。

級聯(lián)的Select如何寫？

這里討論的級聯(lián)Select，并不是Cascader級聯(lián)選擇器，而是2個Select，后一個Select的下拉菜單Options依賴于前一個Select選擇的Option。

2個Select代碼我隨便寫一點：

        <el-form-item label="工種" prop="workTypeId">
          <el-select v-model="form.workTypeId" placeholder="請選擇工種"
            clearable
            :style="{width: '100%'}"
          >
            <el-option v-for="(item, index) in workTypeList" :key="index"
              :label="item.workTypeName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="人員" prop="userId">
          <el-select v-model="form.userId" placeholder="請選擇人員"
            clearable
            :style="{width: '100%'}"
          >
            <el-option v-for="(item, index) in personList" :key="index"
              :label="item.nickName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>

情景1：頁面初始化的時候從服務(wù)器獲取workTypeList，而personList需要根據(jù)前一個Select選擇了什么工種，再從服務(wù)器獲取對應(yīng)的人員數(shù)據(jù)。

解決方案：給第一個Select綁定change事件，change回調(diào)要做的操作是：

this.$set(this.form, 'userId', null);
this.personList = [];
ajax().then(res => {
  this.personList = res.rows;
});

另外提醒一句：如果是多個Select，比如5個，都是級聯(lián)關(guān)系，第一個Select的改變會重新加載第二個Select，此時你還要做一個操作就是清空第2、3、4、5個Select的Options和值。同理：

第二個Select的改變應(yīng)清空第3、4、5個Select的Options和值。
第三個Select的改變應(yīng)清空第4、5個Select的Options和值。
第四個Select的改變應(yīng)清空第5個Select的Options和值。

情景2：頁面初始化的時候從服務(wù)器獲取workTypeList和personList，其中personList相當(dāng)于一次性加載總表，然后根據(jù)前一個Select選擇了什么工種，從personList再過濾人員數(shù)據(jù)。

解決方案：依然是第一個Select加change事件，它要做的事就相對簡單了：

@change="$set(form, 'userId', null)"

然后修改第二個Select：

v-for="(item, index) in personList"

改為：

v-for="(item, index) in personList.filter(v=>form.workTypeId===v.workTypeId)"

前提是，personList的每項必須有workTypeId屬性，如果沒有，必須要求后端給出。

Select多選，如何有序排列？

比如下拉菜單是周一到周日，如果我亂序選擇，提交的也將是亂序。怎樣做到邊選擇邊排序？

    onChangeDayOfTheWeek(value) {
      this.form.weeklyTimeRange = value.sort((a,b) => {
        return '一二三四五六日'.indexOf(a[1]) - '一二三四五六日'.indexOf(b[1]);
      }).join(',');
    },

這樣保證了2處排序：

1. Select輸入框的排序正確，由于sort會修改自身，所以輸入框的排序也是正確的。

2. 提交的字段的值正確，因為是排序之后再賦值給字段的。

Date-Picker禁止選擇過去、禁止選擇未來

使用picker-options的disabledDate來控制，對年、月選擇器都有效。

組件的計算機(jī)制是：

1. disabledDate的參數(shù)是一個時間字符串，組件會遍歷所有需要參與判斷的日期，每個日期都取凌晨0點的時間。函數(shù)本身返回true時，則禁止該日期。

2. 打算禁止過去（或未來）的日期，一般就是跟現(xiàn)在實際時間做比較。

由于構(gòu)思代碼比較費腦，在此我直接列出結(jié)果：

比如，禁止選擇昨天以及更早：

        <el-date-picker
            :picker-options="pickerOptions"
        >
        </el-date-picker>

data() {
  return {
    pickerOptions: {
      disabledDate(v) {
        return new Date().getTime() - 86400000 > v.getTime();
      }
    }
  }
}

月份選擇器

月份選擇器的原則是：

• 如果某個月里面的M天是false，N天是true，就整體認(rèn)為是false，也就是該月不disable。

• 如果某個月里所有天全是true，才整體是true，才會執(zhí)行disable。

年份選擇器