element-ui的表格增加行_[vue]结合 ElementUI 的 table 和 calendar 做一个价格日历

项目中需要做一个价格日历，便于展示和修改日期价格，我们先看下最终效果，然后利用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>