项目中需要做一个价格日历,便于展示和修改日期价格,我们先看下最终效果,然后利用ElementUI的table 和 calendar 实现一下。
来看看主要代码(仅保留了主要代码和属性,并不完整,可以自行根据实际情况修改):
<template>
<div class="calendar-list-container">
<!--expand-row-keys设置了row-key也要设置,
expand-change 当用户对某一行展开或者关闭的时候会触发该事件(展开行时,回调的第二个参数为 expandedRows;树形表格时第二参数为 expanded) row, (expandedRows | expanded)-->
<el-table
ref="table"
key="id"
v-loading="listLoading"
:data="list"
element-loading-text="loading"
row-key="id"
:expand-row-keys="expands"
@expand-change="expandChange"
>
<el-table-column
align="center"
type="expand"
>
<template slot-scope="scope">
<!--渲染价格日历calendar组件 -->
<el-calendar
v-loading="calendarLoad"
element-loading-text="loading"
>
<template
slot="dateCell"
slot-scope="{date, data}"
>
<!--今日及之后的价格可设置setPrice,这里不够优雅 -->
<div
:class="nowDay <= data.day.replace(/-/g, '')? 'calendar-div' : 'calendar-div calendar-prev'"
@click="nowDay <= data.day.replace(/-/g, '') && setPrice(data, date)"
>
<div>{
{ data.day.slice(-2) }}</div>