el-calendar 点击日期修改内容

最新推荐文章于 2025-03-30 23:15:24 发布

一只小柚叽

最新推荐文章于 2025-03-30 23:15:24 发布

阅读量959

点赞数

分类专栏： vue 文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/Kamikorosu/article/details/126036045

版权

本文介绍如何在前端项目中，利用 Vue.js 和 el-calendar 组件，实现点击日期后动态修改显示的内容。通过展示效果图、HTML 结构、JavaScript 逻辑以及 CSS 样式，详细阐述了整个实现过程。

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

效果图

在这里插入图片描述

HTML

<div >
 <el-page-header @back="goBack" content="价格日历"></el-page-header>
    <div class="searchblock mar-top-30px">
      <el-date-picker
        v-model="yearMonth"
        type="month"
        placeholder="选择月"
        value-format="yyyy-MM"
      >
      </el-date-picker>
      <el-button
        class="mar-left-15px"
        icon="el-icon-search"
        @click="changeCalendarDate"
        type="primary"
        >查询</el-button
      >
    </div>
	
	<!-- 日历部分 -->
	<el-calendar :first-day-of-week="7" id="calendar" v-model="defaultValue" class="mar-top-30px">
      <template slot="dateCell" slot-scope="{ data }">
        <div class="calendarbox" @click="changePrice(data)">
          <p class="calendar-day">
            {
  { data.day.split("-"