场景
前端使用ElementUI的el-calendar组件实现可视化的节假日的增删改查。
主页面显示效果如下
点击日历组件上的某天进行新增节假日时
点击已经存在的节假日编辑时
实现
首先el-calendar是支持自定义内容的，官方文档地址：
https://element.eleme.cn/#/zh-CN/component/calendar
官方示例文档：
通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API
文档。
官方示例代码
仿照官方代码，这里新增一个自定义内容的el-calendar
注意：
1.为了首先已经设置过节假日的日期颜色为绿色，所以这里绑定class使用的是选择表达式
其中rei是一个用来查询所有的假期的索引数组，索引值为获取的日期
通过判断当前日期是否在假期的索引数组中来绑定is-selected样式。
所以需要提前声明数组rqi
以及定义样式is-selected
2.然后绑定了单击事件
用于对新增和编辑假期的触发。
3.具体显示的内容模板通过
根据文档，通过data.day获取的日期格式为yyyy-MM-dd，这里只取月和日，然后后面是选择表达式，
如果当前日期的索引存在，则在后面加上假期的名称。
其中rqineirong是一个键值对的对象，键是节假日中的日期，值是所属节假日的相关信息。
所以需要提前声明此对象。
然后就是在页面刚加载完之后查询出所有的假期并构造出这种前端所需要的键值对对象的格式。
在查询所有假期的请求数据的方法中
其中调用请求后台数据的方法，将后台数据构造成索引的数组和一个键值对的对象。
请求后台数据的js方法
就是向后台发送get请求，来到后台数据部分。
首先需要设计数据库
使用代码生成工具生成后台代码，来到Controller层
最终后台构造成的数据结构为
最终要将数据库中每个节假日的开始到结束日期每一天构造成一个键值对，键是日期，值是日期所属的假期对象。
这样就完成了 已有节假日的显示，若要再实现点击某天进行新增或者编辑节假日，上面已经添加了点击事件
在点击事件里
进行打开新增或者编辑页面的操作，判断条件是
前面已经在页面初始化后将查询结果查询并存放在this.rqineirong里面，在点击事件中获取当前日期，并判断是否是节假日，如果是则显示编辑，否则显示新增
新增和编辑页面的代码
如果是编辑的话会将对应的日期key获取到的节假日的内容赋值给this.form，并已经与显示的控件进行双向绑定。
相应的对节假日进行编辑和删除只要调用接口实现即可。
index.vue完整代码
调用接口的js完整代码
后台Controller完整代码