Element UI各种使用问题汇总（Select、Picker篇）

Select选择一项无法选中的问题

极少情况下会出现这个问题，可以试试@change="$forceUpdate()"。

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

级联的Select如何写？

这里讨论的级联Select，并不是Cascader级联选择器，而是2个Select，后一个Select的下拉菜单Options依赖于前一个Select选择的Option。

2个Select代码我随便写一点：

情景1：页面初始化的时候从服务器获取workTypeList，而personList需要根据前一个Select选择了什么工种，再从服务器获取对应的人员数据。

解决方案：给第一个Select绑定change事件，change回调要做的操作是：

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

另外提醒一句：如果是多个Select，比如5个，都是级联关系，第一个Select的改变会重新加载第二个Select，此时你还要做一个操作就是清空第2、3、4、5个Select的Options和值。同理：

第二个Select的改变应清空第3、4、5个Select的Options和值。
第三个Select的改变应清空第4、5个Select的Options和值。
第四个Select的改变应清空第5个Select的Options和值。

情景2：页面初始化的时候从服务器获取workTypeList和personList，其中personList相当于一次性加载总表，然后根据前一个Select选择了什么工种，从personList再过滤人员数据。

解决方案：依然是第一个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来控制，对年、月选择器都有效。

组件的计算机制是：

1. disabledDate的参数是一个时间字符串，组件会遍历所有需要参与判断的日期，每个日期都取凌晨0点的时间。函数本身返回true时，则禁止该日期。

2. 打算禁止过去（或未来）的日期，一般就是跟现在实际时间做比较。

由于构思代码比较费脑，在此我直接列出结果：

比如，禁止选择昨天以及更早：

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

禁止范围	代码
今天以及更早	new Date().getTime() > v.getTime()
昨天以及更早	new Date().getTime() - 86400000 > v.getTime()
今天以及更晚	new Date().getTime() - 86400000 < v.getTime()
明天以及更晚	new Date().getTime() < v.getTime()

月份选择器

月份选择器的原则是：

• 如果某个月里面的M天是false，N天是true，就整体认为是false，也就是该月不disable。

• 如果某个月里所有天全是true，才整体是true，才会执行disable。

禁止范围	代码
本月以及更早	new Date().getFullYear() * 100 + new Date().getMonth() >= v.getFullYear() * 100 + v.getMonth()
上月以及更早	new Date().getFullYear() * 100 + new Date().getMonth() > v.getFullYear() * 100 + v.getMonth()
本月以及更晚	new Date().getFullYear() * 100 + new Date().getMonth() <= v.getFullYear() * 100 + v.getMonth()
下月以及更晚	new Date().getFullYear() * 100 + new Date().getMonth() < v.getFullYear() * 100 + v.getMonth()

年份选择器

禁止范围	代码
本年以及更早	new Date().getFullYear() >= v.getFullYear()
去年以及更早	new Date().getFullYear() > v.getFullYear()
本年以及更晚	new Date().getFullYear() <= v.getFullYear()
明年以及更晚	new Date().getFullYear() < v.getFullYear()