Usage

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import TimeTable from "../src/index";

Vue.use(ElementUI);
Vue.use(TimeTable);

<TimeTable
      :originData="people"
      :headerData="headerData"
      :mainKey="'name'"
      :statusColor="statusColor"
      :showTimeLine="showTimeLine"
      @showView="showView"
      @changeStatus="changeStatus"
    >
      <div slot="popover" slot-scope="{ row }">
        <div class="title">
          {{ row.name }}
        </div>
      </div>
      <div slot="timeDetail" slot-scope="{ row }">
        <div class="time-content">
          <div class="title">
            {{ row.name }}
          </div>
        </div>
      </div>
    </TimeTable>

attribute

属性名|类型|默认值|描述 ---|---|---|--- originData|Array|[]|表格原数据 headerData|Array|[]|表头的数据 showTimeLine|Boolean|false|是否显示当前的时间线 mainKey|String|name|用于表头数据与表格数剧的对比 找出相应时间块的位置等等 blockWidth|Number|130|一个表格的宽度 blockHeight|Number|45|一个表格的高度 timeRanger|Array|["8:00", "22:00"]|时间跨度 minuteHeight|Number|1|每一分钟的高度px statusColor|Array|[]|状态 用于表格底部的高度显示 popover|slot|默认空|弹窗的显示内容 slot-scope返回内容 timeDetail|slot|默认空|时间块的显示内容 slot-scope返回内容 showView|event||点击时间块的事件 返回行内容 changeStatus|event||点击时间块的事件 返回点击的状态类型 以及勾选状态