<template> <el-calendar ref="calendar"> <template #header="{ date }"> <el-button-group style="display: flex; justify-content: flex-end; align-items: center;"> <el-select v-model="selectedYear" placeholder="年份"> <el-option v-for="year in years" :key="year" :value="year" :label="year + '年'"></el-option> </el-select> <el-select v-model="selectedMonth" placeholder="月份"> <el-option v-for="month in months" :key="month" :value="month" :label="month + '月'"></el-option> </el-select> <el-button size="small" @click="selectDate('today')" style="height: 32px; margin-left: 8px;"> 今天 </el-button> </el-button-group> </template> <template slot="dateCell" slot-scope="{ date, data }"> <p>{{ date.day }}</p> </template> </el-calendar> </template>为什么date没有东西
时间: 2023-10-09 07:13:46 浏览: 258
详解Angular 自定义结构指令
根据你提供的代码,似乎你正在使用ElementUI的`el-calendar`组件,并在`dateCell`插槽中尝试访问`date`对象。然而,根据你的描述,`date`对象没有任何值。
在`el-calendar`组件中,`dateCell`插槽的`slot-scope`属性会将每个日期单元格的信息传递给插槽内容。但是,默认情况下,`date`对象是没有直接的属性叫做`day`的,所以你可能无法在插槽中正确地访问到日期信息。
要解决这个问题,可以使用`slot-scope`的参数来获取完整的日期对象,然后根据需要提取所需的属性。例如,你可以通过 `date.date` 获取日期对象,然后通过 `date.date.getDate()` 获取日期的天数。
修改你的代码如下:
```html
<template>
<el-calendar ref="calendar">
<template #header="{ date }">
<el-button-group style="display: flex; justify-content: flex-end; align-items: center;">
<el-select v-model="selectedYear" placeholder="年份">
<el-option v-for="year in years" :key="year" :value="year" :label="year + '年'"></el-option>
</el-select>
<el-select v-model="selectedMonth" placeholder="月份">
<el-option v-for="month in months" :key="month" :value="month" :label="month + '月'"></el-option>
</el-select>
<el-button size="small" @click="selectDate('today')" style="height: 32px; margin-left: 8px;">
今天
</el-button>
</el-button-group>
</template>
<template slot="dateCell" slot-scope="{ date, data }">
<p>{{ date.date.getDate() }}</p>
</template>
</el-calendar>
</template>
```
在上述代码中,通过`date.date`获取日期对象,并使用`getDate()`方法获取日期的天数。这样,你就可以正确地显示日期了。
希望这能解决你的问题。如果还有其他疑问,请随时提问。
阅读全文