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值不是选择的具体日期数字时，也更改；
