elementUi el-calendar日历组件使用方法

就是那块料

已于 2023-11-17 17:28:01 修改

阅读量1.1k

点赞数

文章标签： elementui 前端 javascript

于 2023-11-17 17:27:21 首次发布

本文链接：https://blog.csdn.net/m0_61449795/article/details/134467461

版权

本文介绍了前端如何使用Vue的el-calendar组件，通过axios调用后端接口获取数据，并在前端展示。后端通过JavaSpring处理数据格式，确保与前端组件兼容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果：

前端变量声明：

calendarData：[],

dateValue: null

前端组件：

<el-calendar v-model="dateValue">
    <div slot="dateCell" slot-scope="{date, data}" style="height: 100%">
        <div>
            <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
             <div v-for="item in calendarData">
                <div v-if="(item.years).indexOf(data.day.split('-').slice(0)[0])!=-1">
                    <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
                        <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                            <el-tooltip class="item" effect="dark" :content="item.things" placement="right">
                                <div class="is-selected">{{ item.things }}</div>
                            </el-tooltip>
                        </div>
                        <div v-else />
                    </div>
                    <div v-else />
                </div>
                <div v-else />
            </div>
        </div>
    </div>
</el-calendar>

执行查询方法：

listSelf() {
  const _this = this
  _this.calendarData = []
  listSelf(this.$http, {}).then(result => {
    if (result) {
      result.forEach(function(data) {
        if (data.things.indexOf('null') === -1) {
          _this.calendarData.push(data)
        }
      })
    }
  })
}

后端格式转换方法：

@ApiModelProperty(value = "数据查询")
@PostMapping(value = PATH + "listSelf")
public ResponseEntity<List<EverydayDto>> listSelf(@RequestBody Everyday form) {
    List<Everyday> list = this.everydayService.list();
    List<EverydayDto> result = new ArrayList<>();
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
    list.forEach(data -> {
        //这里是判断是否提醒根据业务需求自行更改
        if(Constant.BE_IN_COMMON_USE_01.equals(data.getWarn())) { 
            EverydayDto everydayDto = new EverydayDto();
            String[] dates = sdf.format(data.getDate()).split("-");
            everydayDto.setYears(dates[0]);
            everydayDto.setMonths(dates[1]);
            everydayDto.setDays(dates[2]);
            everydayDto.setThings("工作内容："+data.getJobContent());
            result.add(everydayDto);
        }
    });
    return ResponseEntity.ok(result);
}

Do类：//这里是转换前端组件需要的数据格式

@Data
@ApiModel("我的日常")
public class EverydayDo {

    @ApiModelProperty(value = "年")
    private String years;
    @ApiModelProperty(value = "月")
    private String months;
    @ApiModelProperty(value = "日")
    private String days;

    @ApiModelProperty(value = "内容")
    private String things;


}

实体类：

@EqualsAndHashCode(callSuper = true)
@Data
@TableName("t_everyday")
@ApiModel(description = "我的日常")
public class Everyday extends BaseEntity<Everyday> {

    @ApiModelProperty(value = "工作内容")
    private String jobContent;

    @ApiModelProperty(value = "是否提醒")
    private String warn;

    @ApiModelProperty(value = "提醒日期")
    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
    private Date date;
}

新增方法：

add...