# LessonTable 课表控件
# 安装
$ npm i @hui-pro/lesson-table -D
# 或者
$ yarn add @hui-pro/lesson-table --dev
# 引入
// main.js
import lessonTable from '@hui-pro/lesson-table';
import '@hui-pro/lesson-table/theme/index.scss';
Vue.use(lessonTable);
# 基础用法
11/11 周一 | 11/12 周二 | 11/13 周三 | 11/14 周四 | 11/15 周五 | 11/16 周六 | 11/17 周日 |
|---|
第一节
|
|---|
第二节
|
第三节
|
第四节
|
第五节
|
<h-lesson-table
style="width: 840px; height: 480px;margin: 20px;"
:topRow="topRow"
:leftCol="leftCol"
:itemDatas="itemDatas">
</h-lesson-table>
<script>
export default {
name: 'lesson-table-page',
data() {
return {
topRow: [{text: '11/11', subText: '周一', isToday: false}],// 数据量较多，不全部展示，只显示一个
leftCol: [{text: '第一节'}],// 数据量较多，不全部展示，只显示一个
itemDatas: [// 二维数组，节次
[// 一维数组，一周内，当前节次的所有课程
{
'classId': '12345',
'createTime': '2019年11月15日',
'className': '希望一班',
'subjectName': '语文',
'startTime': '2019-09-12 8:00',
'endTime': '8:45',
'truantCount': 45,
'leaveCount': 2,
'deviceType': 3,
'courseStatus': 'finish',
'headCount': 10,
},
// 数据较多，不展示
]
]
};
}
};
</script>
# 使用自定义插槽
自定义星期1
|
自定义星期2
|
自定义星期3
|
自定义星期4
|
自定义星期5
|
自定义星期6
|
自定义星期7
|
|---|
第一节
|
|---|
第二节
|
第三节
|
第四节
|
第五节
|
<h-lesson-table
style="width: 840px; height: 480px;margin: 20px;"
:topRow="topRow"
:leftCol="leftCol"
:itemDatas="itemDatas">
<template slot="week-bar" slot-scope="scope">
<span style="padding-top: 8px;">
自定义星期{{scope.colIndex + 1}}
</span>
</template>
<template slot="cell-item" slot-scope="scope">
<span v-if="scope.itemData && scope.itemData.subjectName" style="margin-left: 60px; line-height: 100px;font-weight: blod; color: red;">
课程 {{scope.itemData.subjectName}}</span>
<span v-else style="margin-left: 60px; line-height: 100px;">当前无课</span>
</template>
</h-lesson-table>
<script>
export default {
name: 'lesson-table-page',
data() {
return {
topRow: [{text: '11/11', subText: '周一', isToday: false}],// 数据量较多，不全部展示，只显示一个
leftCol: [{text: '第一节'}],// 数据量较多，不全部展示，只显示一个
itemDatas: [// 二维数组，节次
[// 一维数组，一周内，当前节次的所有课程
{
'classId': '12345',
'createTime': '2019年11月15日',
'className': '希望一班',
'subjectName': '语文',
'startTime': '2019-09-12 8:00',
'endTime': '8:45',
'truantCount': 45,
'leaveCount': 2,
'deviceType': 3,
'courseStatus': 'finish',
'headCount': 10,
},
// 数据较多，不展示
]
]
};
}
};
</script>
# API
# Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 示例 |
|---|---|---|---|---|---|
| rowColName | 斜线表头的行列名，类型 | Object | - | {row: '周次', col: '节次'} | - |
| topRow | 周次表头数据。isToday: 是否为当天。 | Array<Object<itemData>> | - | [] | [{text: '11/11', subText: '周一', isToday: false}] |
| leftCol | 侧边节次信息。 | Array<Object<itemData>> | - | [] | [{text: '第一节'}] |
| itemDatas | 课程数据。二维数据，节次，周几 | Array< Array<Object<itemData>> > | - | - | [[{'classId': null,'createTime': '2019年11月15日',className': '希望一班', 'subjectName': '语文', 'startTime': '2019-09-12 8:00', 'endTime': '8:45', 'truantCount': 45, 'leaveCount': 2, 'deviceType': 3, 'courseStatus': 'finish', 'headCount': 10,}]] |
# events
暂未开放，由各个插槽去实现。
# slots
| 插槽名 | 作用 | 域参数 |
|---|---|---|
| cell-item | 课程内容 | {rowIndex: '节次', colIndex: '周次（周一，周二分别为 0,1）', itemData: '课程数据。Object'} |
| lesson-bar | 节次 | {rowIndex: '节次', itemData: '节次数据。Object'} |
| week-bar | 星期 | {colIndex: '周次（周一，周二分别为 0,1）', itemData: '星期几数据。Object'} |
| lesson-week | 课表左上角的斜线表格 | {rowColName} |