后台配置日历+饿了么组件效果

wuau_

已于 2022-07-16 15:52:43 修改

阅读量725

点赞数 1

文章标签： vue.js elementui javascript

于 2022-07-16 15:31:55 首次发布

本文链接：https://blog.csdn.net/wuau_/article/details/125819508

版权

这篇博客是一位前端新手分享的后台日历配置经验，通过Vue.js和ElementUI组件库，实现了日历功能。文章包含页面效果展示、HTML代码片段以及如何引入接口和定义方法。

摘要由CSDN通过智能技术生成

本人纯前端小白第一次在平台上发布文章。有兴趣的可以互相交流，前几天后台项目，配置日历接口，跌跌撞撞实现小小功能，可以参考学习。

《页面效果》

《HTML代码》


<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4" class="aside" style="border: 1px solid #eee;">
        <el-button
          type="primary"
          class="addCalendar"
          :title="'新增日历'"
          @click="addYearPage"
        >
          新增日历
        </el-button>
        <el-input
          placeholder="搜索关键词"
          class="search"
          clearable
        />
        <div class="list">
          <el-button
            v-for="(list,index) in this.optDataList"
            :key="index"
            type="primary"
            class="list-button"
            :class="{ active: activeIndex === index }"
            @click="ObtainCalendar(list.year,index)"
          >
            <span class="listName">{
  { list.year }}</span>
          </el-button>
        </div>
      </el-col>
      <div>
        <el-radio-group v-model="month" class