1.0.0 • Published 3 years ago
vue-time-table-and-timesheet v1.0.0
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 | 点击时间块的事件 返回点击的状态类型 以及勾选状态 |