vue实现table课程表

最新推荐文章于 2024-08-25 00:12:43 发布
最新推荐文章于 2024-08-25 00:12:43 发布
阅读量2w 收藏 62
点赞数 14
分类专栏： vue 数据结构 文章标签： vue 课程表 table 表格 二维数组
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lihefei_coder/article/details/98871450
版权

方案一

采用二维数组，固定显示每周7天及固定课节数，无数据的天及课节也会固定占位

在这里插入图片描述

<template>
    <div class="class-table">
        <div class="table-wrapper">
            <div class="tabel-container">

                <table>
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th v-for="(weekNum, weekIndex) in classTableData.courses.length" :key="weekIndex"> {{'周' + digital2Chinese(weekIndex, 'week')}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(lesson, lessonIndex) in classTableData.lessons" :key="lessonIndex">
                            <td>
                                <p>{{'第' + digital2Chinese(lessonIndex+1) + "节"}}</p>
                                <p class="period">{{ lesson }}</p>
                            </td>

                            <td v-for="(course, courseIndex) in classTableData.courses" :key="courseIndex">
                                {{classTableData.courses[courseIndex][lessonIndex] || '-'}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            classTableData: {
                lessons: [
                    '08:00-09:00',
                    '09:00-10:00',
                    '10:00-11:00',
                    '11:00-12:00',
                    '13:00-14:00',
                    '14:00-15:00',
                    '15:00-16:00',
                    '16:00-17:00'
                ],
                courses: [
                    ['', '', '', '', '', '', '', ''],
                    ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
                    ['语文', '数学', '英语', '历史', '', '化学', '物理', '生物'],
                    ['生物', '', '化学', '政治', '历史', '英语', '数学', '语文'],
                    ['语文', '数学', '英语', '历史', '政治', '', '物理', '生物'],
                    ['生物', '物理', '化学', '', '历史', '英语', '数学', '语文'],
                    ['语文', '数学', '英语', '', '', '', '', ''],
                ]
            }

        };
    },
    created() {
    	// /* mock随机数据*/
        // Mock.mock({
		//     lessons: ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'],
		//     'courses|7': [['生物', '物理', '化学', '政治', '历史', '英语', '', '语文']]
		// });
    },
    methods: {
        /**
        * 数字转中文
        * @param {Number} num 需要转换的数字
        * @param {String} identifier 标识符
        * @returns {String} 转换后的中文
        */
        digital2Chinese(num, identifier) {
            const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
            return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
        }
    }
};
</script>

<style lang="scss" scoped>
.class-table {
    .table-wrapper {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .tabel-container {
        margin: 7px;

        table {
            table-layout: fixed;
            width: 100%;

            thead {
                background-color: #67a1ff;
                th {
                    color: #fff;
                    line-height: 17px;
                    font-weight: normal;
                }
            }
            tbody {
                background-color: #eaf2ff;
                td {
                    color: #677998;
                    line-height: 12px;
                }
            }
            th,
            td {
                width: 60px;
                padding: 12px 2px;
                font-size: 12px;
                text-align: center;
            }

            tr td:first-child {
                color: #333;
                .period {
                    font-size: 8px;
                }
            }
        }
    }
}
</style>

方案二

固定显示每周7天及固定课节数，无数据的天及课节也会固定占位
在这里插入图片描述

<template>
    <div class='class-table'>
        <div class='table-wrapper'>
            <div class='tabel-container'>
                <table>
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th v-for='(week, index) in weeks' :key='index'> {{'周' + digital2Chinese(index+1, 'week')}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for='(item, index) in classTableData' :key='index'>
                            <td>
                                <p>{{'第' + digital2Chinese(index+1) + '节'}}</p>
                                <p class='period'>{{ item.classesTime }}</p>
                            </td>

                            <td v-for='(week, index) in weeks' :key='index'>
                                {{item[week]  || '-'}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            weeks: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
            classTableData: [{
                'classesTime': '08:00-09:00',
                'monday': '物理',
                'tuesday': '英语',
                'wednesday': '政治',
                'thursday': '历史',
                'friday': '化学',
                'saturday': '历史',
                'sunday': '化学'
            }, {
                'classesTime': '09:00-10:00',
                'monday': '生物',
                'tuesday': '物理',
                'wednesday': '化学',
                'thursday': '英语',
                'friday': '化学',
                'saturday': '生物',
                'sunday': '化学'
            }, {
                'classesTime': '10:00-11:00',
                'monday': '生物',
                'tuesday': '物理',
                'wednesday': '生物',
                'thursday': '历史',
                'friday': '生物',
                'saturday': '英语',
                'sunday': '政治'
            }, {
                'classesTime': '11:00-12:00',
                'monday': '',
                'tuesday': '政治',
                'wednesday': '物理',
                'thursday': '政治',
                'friday': '历史',
                'saturday': '历史',
                'sunday': '生物'
            }, {
                'classesTime': '13:00-14:00',
                'monday': '生物',
                'tuesday': '历史',
                'wednesday': '历史',
                'thursday': '历史',
                'friday': '',
                'saturday': '英语',
                'sunday': '化学'
            }, {
                'classesTime': '14:00-15:00',
                'monday': '化学',
                'tuesday': '英语',
                'wednesday': '物理',
                'thursday': '化学',
                'friday': '语文',
                'saturday': '物理',
                'sunday': '英语'
            }, {
                'classesTime': '15:00-16:00',
                'monday': '历史',
                'tuesday': '历史',
                'wednesday': '语文',
                'thursday': '历史',
                'friday': '生物',
                'saturday': '英语',
                'sunday': ''
            }],
            tableShow: false
        };
    },
    created() {
    	// /* mock随机数据*/
        //  Mock.mock({
        //     'data|7': [
        //         {
        //             'classesTime|+1': ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'],
        //             'monday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
        //             'tuesday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
        //             'wednesday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
        //             'thursday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
        //             'friday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
        //             'saturday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
        //             'sunday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文']
        //         }
        //     ]
        // });
    },
    methods: {
        /**
        * 数字转中文
        * @param {Number} num 需要转换的数字
        * @param {String} identifier 标识符
        * @returns {String} 转换后的中文
        */
        digital2Chinese(num, identifier) {
            const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
            return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
        }
    }
};
</script>

<style lang='scss' scoped>
.class-table {
    .table-wrapper {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .tabel-container {
        margin: 7px;

        table {
            table-layout: fixed;
            width: 100%;

            thead {
                background-color: #67a1ff;
                th {
                    color: #fff;
                    line-height: 17px;
                    font-weight: normal;
                }
            }
            tbody {
                background-color: #eaf2ff;
                td {
                    color: #677998;
                    line-height: 12px;
                }
            }
            th,
            td {
                width: 60px;
                padding: 12px 2px;
                font-size: 12px;
                text-align: center;
            }

            tr td:first-child {
                color: #333;
                .period {
                    font-size: 8px;
                }
            }
        }
    }
}
</style>

方案三

根据随机周数及随机课节数渲染

在这里插入图片描述

<template>
    <div class="class-table">
        <div class="table-wrapper">
            <div class="tabel-container">
                <table>
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th v-for="(weekNum, weekIndex) in weeks" :key="weekIndex"> {{'周' + digital2Chinese(weekNum, 'week')}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(courseNum, courseIndex) in coursesLen" :key="courseIndex">

                            <td>
                                <p>{{'第' + digital2Chinese(courseNum) + "节"}}</p>
                                <p class="period">{{ classTableData.period[courseIndex] }}</p>
                            </td>

                            <td v-for="(weekNum, weekIndex) in weeks" :key="weekIndex">
                                {{ fieldCharacter(weekIndex, courseIndex) }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            weeks: [], //周集合
            coursesLen: 0, //最大课节数
            classTableData: { //mock模拟的数据
                period: ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'], //时间段
                weekCourse: [
                    {
                        'week': 0,
                        'courses': [
                            { 'index': 1, 'title': '物理' },
                            { 'index': 3, 'title': '语文' }
                        ]
                    },
                    {
                        'week': 1,
                        'courses': [
                            { 'index': 3, 'title': '生物' },
                            { 'index': 4, 'title': '语文' },
                            { 'index': 5, 'title': '历史' },
                            { 'index': 6, 'title': '数学' },
                            { 'index': 7, 'title': '英语' },
                            { 'index': 8, 'title': '生物' },
                            { 'index': 1, 'title': '生物' }
                        ]
                    },
                    {
                        'week': 3,
                        'courses': [
                            { 'index': 5, 'title': '英语' },
                            { 'index': 6, 'title': '英语' },
                            { 'index': 7, 'title': '物理' },
                            { 'index': 8, 'title': '英语' },
                            { 'index': 1, 'title': '生物' },
                            { 'index': 2, 'title': '数学' },
                            { 'index': 3, 'title': '英语' }
                        ]
                    },
                    {
                        'week': 4,
                        'courses': [
                            { 'index': 4, 'title': '语文' },
                            { 'index': 5, 'title': '英语' },
                            { 'index': 6, 'title': '生物' },
                            { 'index': 7, 'title': '历史' }
                        ]
                    },
                    {
                        'week': 5,
                        'courses': [
                            { 'index': 8, 'title': '化学' },
                            { 'index': 1, 'title': '英语' }
                        ]
                    }
                ]
            }
        }
    },
    created() {
        this.updateData();
        this.initWeekCourses();
    },
    methods: {
        /**
         * 更新mock模拟的数据，对数据进行排序
         */
        updateData() {

            /* 将数据按从周日到周六排序 */
            this.classTableData.weekCourse.sort((a, b) => {
                return a.week - b.week;
            });

            /* 将数据按从第一节到第n节排序 */
            for (let v of this.classTableData.weekCourse) {
                for (let k in v) {
                    if (k === 'courses') {
                        v[k].sort((a, b) => {
                            return a.index - b.index;
                        });
                    }
                }
            }

            console.log(JSON.stringify(this.classTableData.weekCourse));
        },
        /**
         * 计算周数据及课节数
         */
        initWeekCourses() {
            const that = this;
            this.weeks = []; //周集合
            this.coursesLen = 0; //最大的课节数

            this.weeks = this.classTableData.weekCourse.map((item, index) => {
                for (let k in item) {
                    if (k === 'courses') {
                        let maxCoursesLen = 0;
                        /* 取出一周中最大的课节数及当天的最大课节数 */
                        for (let j of item[k]) {
                            j.index > that.coursesLen && (that.coursesLen = j.index); //取所有一周里最大课节值
                            j.index > maxCoursesLen && (maxCoursesLen = j.index); //取当天最大课节值
                        }


                        /* 如果当天的课节总数小于当天的最大课节值 */
                        if (item[k].length < maxCoursesLen) {
                            for (let i = 0; i < maxCoursesLen; i++) { //以最大课节值为终点遍历当天课节
                                if (!item[k][i] || item[k][i].index != (i + 1)) { //如果下标课节不存在或着与循环的下标不匹配
                                    item[k].splice(i, 0, ''); //填充空课节
                                }
                            }
                        }
                    }
                }
                return item.week;
            });

            console.log(JSON.stringify(this.classTableData.weekCourse));




        },
        /**
         * 处理格子数据，无数据转换为字符串'-'
         * @param {Number} weekIndex 周几对应的下标
         * @param {Number} courseNum 第几节课对应的下标
         * @returns {String} 返回对应的字符
         */
        fieldCharacter(weekIndex, courseIndex) {
            if (
                this.classTableData.weekCourse[weekIndex]
                &&
                this.classTableData.weekCourse[weekIndex].courses[courseIndex]
                &&
                this.classTableData.weekCourse[weekIndex].courses[courseIndex].index === courseIndex + 1
            ) {
                return this.classTableData.weekCourse[weekIndex].courses[courseIndex].title;
            }
            return '-';
        },


        /**
        * 数字转中文
        * @param {Number} num 需要转换的数字
        * @param {Boolean} identifier 标识符
        * @returns {String} 转换后的中文
        */
        digital2Chinese(num, identifier) {
            const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
            return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
        },
    }
};
</script>

<style lang="scss" scoped>
.class-table {
    .table-wrapper {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .tabel-container {
        margin: 7px;

        table {
            table-layout: fixed;
            width: 100%;

            thead {
                background-color: #67a1ff;
                th {
                    color: #fff;
                    line-height: 17px;
                    font-weight: normal;
                }
            }
            tbody {
                background-color: #eaf2ff;
                td {
                    color: #677998;
                    line-height: 12px;
                }
            }
            th,
            td {
                width: 60px;
                padding: 12px 2px;
                font-size: 12px;
                text-align: center;
            }

            tr td:first-child {
                color: #333;
                .period {
                    font-size: 8px;
                }
            }
        }
    }
}
</style>
lihefei_coder
关注
专栏目录
vue2 - 最新详细实现 “日历课程表“ 上课时间表功能组件，按时间范围筛选周一至周日的课表、支持快捷上一周和下一周切换查看排班表，教务系统专用老师排课表插件功能，vue课程表使用后端接口数据渲染！
高级前端工程师
07-20 2018
vue2，nuxt2，课程表，本周课程安排，课表，学生，老师，教务系统，可切换每一周的课程表，日历课程表，Vue周日历展示大学课程，实现课表，不同课程颜色不同，vue课程表，nuxt课程表，学校周课表，表格table课程表，vue实现动态课程表，动态课程表、安排表，大学课程表，小学课程安排，pc网站，学生课表日期，一周课程表，vue实现课程表，可切换周显示范围，课程表排课系统，课表管理，课程，上课，学习，移动端H5，手机，教师课程管理排班，插件，组件，最好用，后端服务器获取数据，数据，日程表，学生课表插件，
vue实现动态课程表(TimeTable)
热门推荐
m0_57489910的博客
11-08 1万+
动态课程表、安排表
vue v-for的使用案例：课程表
08-05
使用v-for循环展示表格数据，主要是解决平常表格中内容同与不同的问题，显示出与excel展示内容相似的效果。
Vue 项目实战1-学习计划表
最新发布
2301_81807150的博客
08-25 1618
Vue 项目实战1-学习计划表。
vue实现课程表，可切换周显示范围，纯原生实现
zuowentao666的博客
07-31 1250
直接上图下拉即用，记得点赞
vue 实现课程表
xiaofang_z的博客
04-27 4280
要实现的效果如下： 主要是花了很长时间去花了这个页面，也是各种百度，所以，在此记录下，有需要的人可以借鉴看下 包含了html,假数据、以及css,可以整个copy过去 目前这一版是未联调的静态页面，下一次发一个已经联调过的，含接口的数据，看真实效果 <template> <div> <div class="Micro_top"> <div class="searchs"> <span>时间 :&
vue — 课程表
sueRimn的博客
04-08 4489
功能需求是：在有对接数据的情况下显示该课程表，默认显示当前周的七天数据，并且当天的列要呈淡黄色背景。可以选择日期，必须七天，多了少了都会提示，这个是根据vant的日期选择组件进行小改动实现的，具体实现效果如下。 这是默认当前周的显示： 这是选择少于七天的提示信息，并且确定按钮不可点击： 跟后端沟通，设计的返回数据结构如下： timeTable: { // 返回7天对应的周几数组 weekday: ["周四", "周五"..
我的课表（html+vue）
09-11
我的课表，运用了vue.js，从后台获取数据进行解析，HTML为响应式。
vue+el-table制作岗位排班表
04-13
vue+el-table制作岗位排班表
Vue实现数据表格合并列rowspan效果
12-29
背景 现实中会遇到很多需求，合并列，例如...使用html实现是比较简单的，利用table标签的rowspan属性即可，代码如下： <table> 姓名 课程数 课程名称 成绩 张三 3 语文 <td>100 </tr
vue3 - 最新详细实现 “日历课程表“ 上课时间表功能组件，教务系统专用老师排课表插件功能，按时间范围筛选周一至周日的课表、支持快捷上一周和下一周切换查看排班表，vue课程表使用后端接口数据渲染！
高级前端工程师
07-20 2279
vue3，nuxt3，课程表，本周课程安排，课表，学生课表日期，一周课程表，vue实现课程表，可切换周显示范围，课程表排课系统，课表管理，课程，上课，学习，移动端H5，手机，教师课程管理排班，插件，组件，最好用，后端服务器获取数据，数据，日程表，学生课表插件，日程表插件，学生，老师，教务系统，可切换每一周的课程表，日历课程表，Vue周日历展示大学课程，实现课表，不同课程颜色不同，vue课程表，nuxt课程表，学校周课表，表格table课程表，vue实现动态课程表，动态课程表、安排表，大学课程表，小学课程安排
curriculum-schedule:基于vue的课程表
04-15
课程表 项目设置 npm install json-server启动 json-server --watch data/db.json 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。
Vue项目实战——【基于 Vue3.x + NodeJS】实现的课程表排课系统四（MyMessageBox）动态组件的编写
weixin_45732235的博客
11-13 940
课程表排课系统 MyMessageBox动态组件的编写
vue 课程表（可按时间，移动位置）
weixin_45461004的博客
06-04 453
基本功能已经实现，后面可根据项目具体要求修改。
vue 实现课程表甘特图
weixin_49431241的博客
07-26 960
vue实现课程表甘特图
课表vue html,vue实现table课程表
weixin_31517893的博客
06-20 1263
方案一采用二维数组，固定显示每周7天及固定课节数，无数据的天及课节也会固定占位时间 {{'周' + digital2Chinese(weekIndex, 'week')}}{{'第' + digital2Chinese(lessonIndex+1) + "节"}}{{ lesson }}{{classTableData.courses[courseIndex][lessonIndex] || '-...
vue做学校周课表（高中以下）
xiaoliyo_的博客
01-19 1097
目前手上的项目是学校方面的，统一都有的功能就是课程表，但是用el-Calendar不太好实现，所以这里用原生的table做了一个课程表。
使用vue3绘成一个简单的课程表
weixin_45145454的博客
01-10 2140
简单的用模拟数据写一个课表，
Vue『卡片拖拽式课程表』
weixin_60895836的博客
07-30 1440
在这篇技术博客中，我们介绍了一个用Vue实现的『卡片拖拽式课程表』。我们逐步讲解了组件和组件的实现，以及主视图组件的布局和逻辑。通过拖拽课程卡片到时间表上，我们可以方便地安排不同课程在不同时间段的上课时间。这个简单而实用的课程表可以用于学校、培训机构等教育场景，提高课程管理的效率。
vue实现课表展示的代码
05-05
下面是一个简单的 Vue 代码实现课表展示： ```vue <template> <div> <table> <thead> <tr> <th>时间</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tbody> <tr v-for="(row, index) in tableData" :key="index"> <td>{{ row.time }}</td> <td v-for="(col, index) in row.data" :key="index">{{ col }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { tableData: [ { time: '08:00~09:00', data: ['', '', '', '', ''] }, { time: '09:00~10:00', data: ['', '', '', '', ''] }, { time: '10:00~11:00', data: ['', '', '', '', ''] }, { time: '11:00~12:00', data: ['', '', '', '', ''] }, { time: '13:00~14:00', data: ['', '', '', '', ''] }, { time: '14:00~15:00', data: ['', '', '', '', ''] }, { time: '15:00~16:00', data: ['', '', '', '', ''] }, { time: '16:00~17:00', data: ['', '', '', '', ''] }, { time: '18:00~19:00', data: ['', '', '', '', ''] }, { time: '19:00~20:00', data: ['', '', '', '', ''] }, { time: '20:00~21:00', data: ['', '', '', '', ''] }, { time: '21:00~22:00', data: ['', '', '', '', ''] }, ], }; }, }; </script> ``` 这里使用了一个 `tableData` 数组来存储数据，其中每个元素代表一行课程信息，包括时间和星期一到星期五的课程安排。在模板中使用 `v-for` 指令渲染表格，通过遍历 `tableData` 数组生成每一行的数据。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值