element-ui calendar 日历控件实现编辑假期功能以及样式修改

最新推荐文章于 2025-04-28 15:11:19 发布

张小写

最新推荐文章于 2025-04-28 15:11:19 发布

阅读量6.6k

点赞数 6

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/zhang_xiao_xie/article/details/114698362

版权

效果图：
在这里插入图片描述

1.日历控件html

<template>
  <div class="la-container">
    <la-pagetitle title="节假日管理" back="true">
      <template slot="title-btn" >
          <!-- <el-button size="mini" type="success" @click="addClick()" class="el-icon-plus">创建</el-button> -->
      </template>
    </la-pagetitle>
    <!-- 列表页面 -->
    <div class="la-container-info-item la-container-header">
      <div class="la-info-title-main">
        <el-form
          ref="form"
          :model="queryCriteria"
          label-width="80px"
          inline
          class="demo-table-expand demo-table-info"
          style="width: 100%;"
        >
          <el-form-item>
            <el-input
            placeholder="请输入保养等级"
            v-model="queryCriteria.years" size="mini" @keyup.enter.native="getList">
            </el-input>
        </el-form-item>
          <div class="la-el-btn-box">
            <el-button size="mini" type="primary" @click.native="getList">查询</el-button>
            <el-button size="mini" type="danger" @click="clearQuery">清空</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div class="la-info-main">
      <!-- 关于日历控件 -->
      <el-calendar class="lar-el-calendar" :first-day-of-week='7'>
        <template
        slot="dateCell"
        slot-scope=

最低0.47元/天解锁文章