ElementUI中使用el |
您所在的位置：网站首页 › 怎样查去年的日历 › ElementUI中使用el |
ElementUI中使用el
|
场景
前端使用ElementUI的el-calendar组件实现可视化的节假日的增删改查。 主页面显示效果如下
点击日历组件上的某天进行新增节假日时
点击已经存在的节假日编辑时
博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现首先el-calendar是支持自定义内容的，官方文档地址： https://element.eleme.cn/#/zh-CN/component/calendar 官方示例文档： 通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。
官方示例代码 {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}} .is-selected { color: #1989FA; }仿照官方代码，这里新增一个自定义内容的el-calendar {{ data.day.split('-').slice(1).join('-') }} {{ rqi.indexOf(data.day) > -1 ? rqineirong[data.day].jqmc : ''}} 注意： 1.为了首先已经设置过节假日的日期颜色为绿色，所以这里绑定class使用的是选择表达式 rqi.indexOf(data.day) > -1 ? 'is-selected' : ''"其中rei是一个用来查询所有的假期的索引数组，索引值为获取的日期
通过判断当前日期是否在假期的索引数组中来绑定is-selected样式。 所以需要提前声明数组rqi data() { return { rqi:[],以及定义样式is-selected .is-selected { color: white; background: green; }2.然后绑定了单击事件 @click="handleBianJi(data.day)"用于对新增和编辑假期的触发。 3.具体显示的内容模板通过 {{ data.day.split('-').slice(1).join('-') }} {{ rqi.indexOf(data.day) > -1 ? rqineirong[data.day].jqmc : ''}}根据文档，通过data.day获取的日期格式为yyyy-MM-dd，这里只取月和日，然后后面是选择表达式， 如果当前日期的索引存在，则在后面加上假期的名称。 其中rqineirong是一个键值对的对象，键是节假日中的日期，值是所属节假日的相关信息。 所以需要提前声明此对象。 data() { return { rqi:[], rqineirong:{},然后就是在页面刚加载完之后查询出所有的假期并构造出这种前端所需要的键值对对象的格式。 created() { this.getList(); },在查询所有假期的请求数据的方法中 methods: { /** 查询节假日管理 - 法定节假日列表 */ getList() { this.loading = true; listFdjjr(this.queryParams).then(response => { this.rqi = []; this.rqineirong = {}; for(let i=0;i { data.day.split('-').slice(1).join('-') }} {{ rqi.indexOf(data.day) -1 ? rqineirong[data.day].jqmc : ''}} 确 定 取 消 删除 import { listFdjjr, delFdjjr, addFdjjr, updateFdjjr } from "@/api/jjrgl/fdjjr"; export default { jqmc: "Fdjjr", data() { return { rqi:[], rqineirong:{}, // 遮罩层 loading: true, // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 表单参数 form: {}, // 表单校验 rules: { jqmc: [ { required: true, message: "假期名称不能为空", trigger: "blur" } ], kssj: [ { required: true, message: "开始时间不能为空", trigger: "blur" } ], jssj: [ { required: true, message: "结束时间不能为空", trigger: "blur" } ], lx: [ { required: true, message: "假期类型不能为空", trigger: "change" } ], }, // 节假日类型 jjrlxOptions: [], }; }, created() { this.getList(); this.getDicts("jjr_fdjjr_lx").then(response => { this.jjrlxOptions = response.data; }); }, methods: { /** 查询节假日管理 - 法定节假日列表 */ getList() { this.loading = true; listFdjjr(this.queryParams).then(response => { this.rqi = []; this.rqineirong = {}; for(let i=0;i { if (valid) { if (this.form.id != undefined) { updateFdjjr(this.form).then(response => { if (response.code === 200) { this.msgSuccess("修改成功"); this.open = false; this.reset(); this.getList(); } }); } else { addFdjjr(this.form).then(response => { if (response.code === 200) { this.msgSuccess("新增成功"); this.open = false; this.reset(); this.getList(); } }); } } }); }, /** 编辑日期操作 */ handleBianJi(day) { if(this.rqineirong[day]){ console.log(this.rqineirong[day]) this.form = this.rqineirong[day]; this.title = '编辑节假日'; }else{ let obj = {}; obj.kssj = day.valueOf(); obj.jssj = day.valueOf(); this.form = obj; this.form = obj; this.title = '新增节假日'; } this.open = true; }, deleteForm(){ let ids = []; ids.push(this.form.id) delFdjjr(ids).then(response => { if (response.code === 200) { this.msgSuccess("删除成功"); this.open = false; this.reset(); this.getList(); } }); } } }; .is-selected { color: white; background: green; }调用接口的js完整代码 import request from '@/utils/request' // 查询节假日管理 - 法定节假日列表 export function listFdjjr(query) { return request({ url: 'jjrgl/fdjjr/fdjjrList', method: 'get', params: query }) } // 新增节假日管理 - 法定节假日 export function addFdjjr(data) { return request({ url: '/jjrgl/fdjjr', method: 'post', data: data }) } // 修改节假日管理 - 法定节假日 export function updateFdjjr(data) { return request({ url: '/jjrgl/fdjjr', method: 'put', data: data }) } // 删除节假日管理 - 法定节假日 export function delFdjjr(id) { return request({ url: '/jjrgl/fdjjr/' + id, method: 'delete' }) }后台Controller完整代码 @RestController @RequestMapping("/jjrgl/fdjjr") @Api(tags = "节假日管理") public class FdjjrController extends BaseController { @Autowired private IFdjjrService fdjjrService; /** * 新增节假日管理 - 法定节假日 */ @ApiOperation("法定节假日新增") @PreAuthorize("@ss.hasPermi('jjrgl:fdjjr:add')") @Log(title = "节假日管理 - 法定节假日", businessType = BusinessType.INSERT) @PostMapping public AjaxResult add(@RequestBody Fdjjr fdjjr) { return toAjax(fdjjrService.insertFdjjr(fdjjr)); } /** * 删除节假日管理 - 法定节假日 */ @PreAuthorize("@ss.hasPermi('jjrgl:fdjjr:remove')") @Log(title = "节假日管理 - 法定节假日", businessType = BusinessType.DELETE) @DeleteMapping("/{ids}") @ApiOperation("删除法定节假日") public AjaxResult remove(@PathVariable Long[] ids) { return toAjax(fdjjrService.deleteFdjjrByIds(ids)); } @ApiOperation("法定节假日列表-日历") @GetMapping("/fdjjrList") public List fdjjrList() { List resultList = new ArrayList(); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); //保存日期集合 List dateList = new ArrayList(); List list = fdjjrService.selectFdjjrList(null); for (int i = 0; i < list.size(); i++) { Fdjjr fdjjr = list.get(i); Date date_start = fdjjr.getKssj(); Date date_end = fdjjr.getJssj(); Date date = date_start; //用Calendar 进行日期比较判断 Calendar cd = Calendar.getInstance(); while (date.getTime() |
【本文地址】
今日新闻 |
推荐新闻 |