1.0.0 • Published 1 year 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 | 点击时间块的事件 返回点击的状态类型 以及勾选状态 |