element日历组件内嵌套排班模板解决选择器选择时未响应问题

BaekZh

于 2024-09-11 16:36:40 发布

阅读量274

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/BaekZh/article/details/142143735

效果图：

在使用日历组件内套select会导致选择器选择后不会立马生效需要点击一下日历组件内任意位置才可以生效，这样的用户体验肯定是不行的源码：

<el-calendar v-model="value" v-loading="loading">
        <template slot="dateCell" slot-scope="{data}">
          <span>{{ data.day.split('-').slice(2).join('-') }}</span>
          <div :class="'is-selected'">
            <div class="left">
              <div>白班</div>
              <div>夜班</div>
              <div>值日</div>
            </div>
            <div class="right" v-show="!clickEdit">
              <div v-if="events && events[data.day]" :style="{ 'color' : events[data.day] ? 'green' : 'gray' }">
                {{ events[data.day].morning? (events[data.day].morning).toString() : '' }}
              </div>
              <div v-if="events && events[data.day]" :style="{ 'color' : events[data.day] ? 'green' : 'gray' }">
                {{ events[data.day].afternoon? (events[data.day].afternoon).toString() : '' }}
              </div>
              <div v-if="events && events[data.day]" :style="{ 'color' : events[data.day] ? 'green' : 'gray' }">
                {{ events[data.day].night? (events[data.day].night).toString() : '' }}
              </div>
            </div>
            <div class="editRight" v-show="clickEdit">
              <div v-if="listData[data.day]">
                <el-select :multiple-limit="2" v-model="listData[data.day].morningIds" size="mini" multiple
                           collapse-tags placeholder="请选择" style="padding: 0;margin:0" @change="chooseFn"
                           v-loading="calendarLoading">
                  <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </div>
              <div v-if="listData[data.day]">
<!--      select          -->
                <el-select :multiple-limit="2" v-model="listData[data.day].afternoonIds" size="mini" multiple
                           collapse-tags placeholder="请选择" style="padding: 0;margin:0" @change="chooseFn"
                           v-loading="calendarLoading">
                  <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </div>
              <div v-if="listData[data.day]">
                <el-select :multiple-limit="2" v-model="listData[data.day].nightIds" size="mini" multiple collapse-tags
                           placeholder="请选择" style="padding: 0;margin:0" @change="chooseFn"
                           v-loading="calendarLoading">
                  <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </div>
            </div>
          </div>
        </template>
</el-calendar>

解决方法：

chooseFn() {
      // select 延迟显示解决更新不及时问题
      this.calendarLoading = true
      setTimeout(() => {
        this.calendarLoading = false
      },)
    },