el-calendar 点击日期修改内容

最新推荐文章于 2024-06-05 09:18:45 发布

一只小柚叽

最新推荐文章于 2024-06-05 09:18:45 发布

阅读量815

点赞数

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

本文链接：https://blog.csdn.net/Kamikorosu/article/details/126036045

版权

效果图

在这里插入图片描述

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("-").slice(2).join(&