1.项目需求

1.1需求

制作如下的考勤排班表，可以显示每个岗位每一天的考勤排班情况，并且可以下拉选择人员排班人员更改。

1.2 难点分析

在表格中嵌入下拉选择功能。
需要动态显示每个月的排班情况，因此表头需要动态变化。
后端返回的数据和前端需求不一样，需要对后端数据进行重构形成前端需要的数据。
在前端更改的数据需要返回后端进行保存。

2.考勤排班表实现

2.1 组件库选择

由于整体项目选择了element ui组件库，因此选择了element ui 的table和select组件进行实现。

2.2 数据结构分析

tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]

从element ui官方的示例可知，table对应的数据结构形式，表格中的一行对应table中的一条数据。因此考勤排班表的数据格式也需要组织为对应的结构，其中name为岗位名称，20221201对应的日期表头，selectPerson为该岗位可以选择的人员。

 gridData: [{name: '岗位1',20221201: {name: '张三',id: "1",selectPerson: ['李四', '张三'],},20221202: {name: '李四',id: "2",selectPerson: ['李四', '张三'],}}],

2.3 实现

2.3.1 动态日期表头实现

通过new Date()函数获取日期，实现动态的日期表头。最后获取的两个重要的list为dateindex和everyDay。以2022年12月为例，dateindex=[20221201, 20221202, 20221203 ,......]，everyDay=['1 周四', ‘2 周五’, ‘3 周六’,.....]。

 getEveryDay( ) {const yearandMonth = this.getYearandMonth()var date = new Date()var month = new Date().getMonth()date.setMonth(month + 1);date.setDate(0);const dayArry = [];const peoplelist = {};const dateArray = [];// 获取月份的某一天const day = date.getDate();for (let i = 1; i <= day; i++) {date.setDate(i); // 如果只获取当前选择月份的每一天，则不需要date.setDate(i)只需dayArry.push(i)即可，其中date.setDate(i)是设置当前月份的每一天dayArry.push(i + " " + this.getWeekday(date.getDay())); // 选中月份的每一天和当天是星期几const strday = ("0" + i).slice(-2); //获取当前日（1-31日）dateArray.push(yearandMonth + strday);}this.dateindex = dateArray;this.everyDay = dayArry;},getWeekday(day) {return ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][day];},getYearandMonth() {const nowdata = new Date(new Date().getTime());const year = nowdata.getFullYear();const month = ("0" + (nowdata.getMonth() + 1)).slice(-2); //获取当前月份（0~11，0代表1月）return year + month;},

2.3.2 表格实现

采用table组件实现，其实第一列为岗位名称，后面的列为动态的时间表头，通过v-for动态生成，并在单元格里面嵌入select 组件进行下拉选择，通过v-model绑定选择的人员，@change实现变化监听。

  <el-table style="width: 100%; color: black"><el-table-column property="name" fixed label="岗位" width="100" /><el-table-column v-for="(item, index) in everyDay" :key="item" :props="dateindex[index]" :label="item"width="120"><template slot-scope="scope"><el-select placeholder="姓名" v-model="scope.row[dateindex[index]].name"@change="shiftchange(scope.row[dateindex[index]], scope.row.name, dateindex[index])" clearable><el-option v-for="(dateItem, index) in scope.row[dateindex[index]].selectPerson" :key="dateItem":label="dateItem" :value="dateItem" /></el-select></template></el-table-column></el-table>

注：文章为该功能的实现思路，代码只包含主要功能，不可直接运行。

element ui table实现考勤排班表相关推荐

JS日期排班表(table表格)
JS日期排班表可以根据当前年月进行自动渲染日期,星期,实现更改年月排布(table横向排版) <table class="table table-striped table-bord ...
打卡记录根据排班表每人每日排班上下班时间自动获取结果打卡记录是属于那是区间
目前有1张打卡记录表,1张排班表,效果要打卡记录根据排班表每人每日排班上下班时间自动获取结果打卡记录是属于那是区间的!效果图目前问题点:1.视图写法把区间时间写死,没法根据排班信息进行打卡数据分类 ...
php mysql 排班表_PHP倒班五班三倒
问题 : 甲乙丙丁戊五个人,一日三班(早中晚),全年轮值,做排班表 (不考虑节假日) 想法: 排班记录存数据库,或者本地缓存,方便以后查询, 代码如下: function cal_days_in_y ...
excel自动排班表怎么做？哪里有免费的自动排班表？2022最新整理30份Excel自动排班表，建议收藏
你还在手动排班吗?别再这样做了,我有更高效的方法! 在工作中,我们经常需要进行排班,不管是假期值班,还是直播排班,都需要做一个排班表.以前的时候排班都是手动调的,你周一我周二,但这种做法效率比较低,而 ...
考勤软件之：考勤排班规则
虽然看完全部内容,都能理解,但还是没有找到我想要的内容. 来源:http://www.cnblogs.com/lcmxiaoya/archive/2011/12/26/2301756.html 班次在 ...
这样做excel排班表，省时又省力，附加模板~
如何做好一个排班表? 一个完整的 Excel 排班表应该包含以下内容: 员工信息:包括员工姓名.员工编号.职位等基本信息. 日期和时间:排班表应该有一个日期和时间的列,用于记录每天的排班情况. 班次/ ...
excel设置图片自动更新_智能Excel排班表，日期自动更新，三班排班一键统计，极简轻松...
Hello大家好,我是帮帮.今天跟大家分享一张智能Excel排班表,日期自动更新,班次一键统计,极简轻松. 为了让大家能更稳定的下载模板,我们又开通了全新下载方式(见文章末尾),以便大家可以轻松获得免 ...
Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
php日历排班表,日历排班表软件下载
日历排班表软件app是一款掌上智能排版助手.日历排班表软件app主要为有倒班.值班需求的工作人员提供智能排班功能,您可以通过日历排班表软件app输入对应的数据,就可以精准算出自己的上班.值班时间,非常 ...

element ui table实现考勤排班表