el-select选项自定义日期选择器选项，选中自定义日期，回显具体的日期时间

需求：指标时点选择具体的时间，即自定义日期选项时，可操作选择具体日期。若选择自定义日期，应回显具体日期，如“2024-07-25”

效果图如下：

代码如下：

因为此处v-for生成的面板，每个面板都有一个指标时点选项，所以每个指标时点的select对应的ref需要唯一，此处通过遍历的下标i加以区分。

 1                       <el-form-item label="指标时点" label-width="80px" prop="statsIndicatorDateType">
 2                         <el-select
 3                           :ref="'selectIndicatorDateType' + i"
 4                           filterable
 5                           clearable
 6                           placeholder="请选择指标时点"
 7                           v-model="item.indicatorForm.statsIndicatorDateType"
 8                           size="mini"
 9                           @change="changeStatsIndicatorDateType(item, $event)"
10                           @focus="focusStatsIndicatorDateType(item, i)"
11                           @blur="blurStatsIndicatorDateType(item, i)"
12                           @visible-change="visibleChangeStatsIndicatorDateType($event, item, i)">
13                           <el-option
14                             :class="
15                               k === statsIndicatorDateTypeEnum.length - 1
16                                 ? 'point-events-none'
17                                 : 'point-events-auto'
18                             "
19                             v-for="(sItem, k) in statsIndicatorDateTypeEnum"
20                             :key="k"
21                             :label="sItem.name"
22                             :value="sItem.value">
23                             <template v-if="k === statsIndicatorDateTypeEnum.length - 1">
24                               <span class="margin-right-16" @click.stop="">自定义日期</span>
25                               <el-date-picker
26                                 class="point-events-auto"
27                                 v-model="item.indicatorForm.customStatsIndicatorDate"
28                                 value-format="yyyy-MM-dd HH:mm:ss"
29                                 type="date"
30                                 :clearable="false"
31                                 @click.native.stop=""
32                                 :unlink-panels="true"
33                                 size="mini"
34                                 @change="changeDate($event, item, i)"
35                                 placeholder="选择日期"
36                               ></el-date-picker>
37                             </template>
38                           </el-option>
39                         </el-select>
40                       </el-form-item>

 1     focusStatsIndicatorDateType (item, i) {
 2       this.$nextTick(() => {
 3         if (item.indicatorForm.statsIndicatorDateType === this.customValue) {
 4           this.$refs['selectIndicatorDateType' + i][0].$children[0].$el.children[0].placeholder = item.indicatorForm.customStatsIndicatorDate.split(' ')[0]
 5         }
 6       })
 7     },
 8     blurStatsIndicatorDateType (item, i) {
 9       this.$nextTick(() => {
10         if (item.indicatorForm.statsIndicatorDateType === this.customValue) {
11           this.$refs['selectIndicatorDateType' + i][0].$children[0].$el.children[0].value = item.indicatorForm.customStatsIndicatorDate.split(' ')[0]
12         }
13       })
14     },
15     visibleChangeStatsIndicatorDateType (e, item, i) {
16       if (!e) {
17         this.$nextTick(() => {
18           if (item.indicatorForm.statsIndicatorDateType === this.customValue) {
19             if (this.$refs['selectIndicatorDateType' + i][0].$children[0].$el.children[0].value !== item.indicatorForm.customStatsIndicatorDate.split(' ')[0]) {
20               this.$refs['selectIndicatorDateType' + i][0].$children[0].$el.children[0].value = item.indicatorForm.customStatsIndicatorDate.split(' ')[0]
21             }
22           }
23         })
24       }
25     },
26     changeDate (e, item, i) {
27       item.indicatorForm.statsIndicatorDateType = this.customValue
28       this.$nextTick(() => {
29         this.$refs['selectIndicatorDateType' + i][0].$children[0].$el.children[0].value = e.split(' ')[0]
30       })
31     }

正常情况下，选择完日期后，回显的是‘自定义日期’这几个字，不是选择的具体日期数字，若想显示具体日期数字，需要强制修改回显的数据。因为此处日期设置的是value-format="yyyy-MM-dd HH:mm:ss"，带时分秒的，但显示只要年月日，所以需要截取一下。

1、选完日期后，将select绑定的值item.indicatorForm.statsIndicatorDateType改为自定义日期对应的值this.customValue，通过ref找到具体的select，更改select的value值；

2、select失去焦点后，若选中的是自定义日期，也更改select的value值；

3、select获取焦点后，若选中的是自定义日期，更改select的placeholder 值；

4、select隐藏时，若选中的是自定义日期，select的value值不是选择的具体日期数字时，也更改；