项目是springCloud+vue,前端用的elementUI,有个需求是实现编辑界面字段值、列表数据、和日历的三方数据联动
下面是功能截图
输入框为el-input-number
列表为el-table 可编辑表格(插槽实现)
由于我的逻辑较多,整体代码在400行左右,所以这里只简化说明,大神请绕过,轻吐槽(个人学习vue才一个多月,很多组件的用法或者语法,都还不是很熟悉)
首先引入日历组件,我用的是插槽,日历中要显示自定义内容,还是要用插槽,用例链接elementUI-calender
<el-calendar>
<!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
<template
slot="dateCell"
slot-scope="{date, data}">
<p :class="data.isSelected ? 'is-selected' : ''">
{
{
data.day.split('-').slice(1).join('-') }} {
{
data.isSelected ? '✔️' : ''}}
</p>
</template>
</el-calendar>
<style>
.is-selected {
color: #1989FA;
}
</style>
项目中引入的日历组件
<template #calendarForm>
<el-calendar v-model="value">
<template slot="dateCell" slot-scope="{ date, data }">
<!--用div的作用是点击单元格范围尽可能的大-->
<div