- 根据element组件封装后的日历组件如下图所示,根据后台数据渲染值班计划和双击日期对该日期排班。
- 首先是改造头部,由于element日历组件并不满足所需功能,将element源码进行改造封装。代码如下
<div class="el-calendar__header">
<span class="last" @click="selectDate('prev-month')"
><i class="el-icon-arrow-left"></i
></span>
<div class="el-calendar__title">
{{ i18nDate }}
</div>
<span class="next" @click="selectDate('next-month')"
><i class="el-icon-arrow-right"></i
></span>
</div>
<div class="el-calendar__header">
<div class="el-calendar__title">
{{ i18nDate }}
</div>
<div
class="el-calendar__button-group"
v-if="validatedRange.length === 0">
<el-button-group>
<el-button
type="plain"
size="mini"
@click="selectDate('prev-month')">
{{ t('el.datepicker.prevMonth') }}
</el-button>
<el-button
type="plain"
size="mini"
@click="selectDate('today')">
{{ t('el.datepicker.today') }}
</el-button>
<el-button
type="plain"
size="mini"
@click="selectDate('next-month')">
{{ t('el.datepicker.nextMonth') }}
</el-button>
</el-button-group>
</div>
</div>
- 添加双击事件,在element日历组件是将每个日期封装在了table表格中,单击表格可以自定事件,在这个需求中是要双击后对日期排班。
<date-table
v-for="(range, index) in validatedRange"
:key="index"
:date="range[0]"
:selected-day="realSelectedDay"
:range="range"
:hide-header="index !== 0"
:first-day-of-week="realFirstDayOfWeek"
@pick="pickDay"
@dbClick="dbClick"/
/>
dbClick(day) {
this.$emit("dbClick", day);
},
dbClick(day) {
this.$emit("dbClick", day);
},