element——table使用表格形式给员工排班

功能清单

给每个老人在某个月排班
点击日期选中取消
服务对象和员工列做筛选
当月天数动态
服务次数根据选中个数动态生成，使用深度监听
每个单元格点击事件改变源数据

<template><div><el-table@cell-click="clickCell"border:data="tableData"style="width: 100%"size="small"><!-- 在列中设置filtersfilter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法 --><el-table-columnprop="date"label="服务对象"width="100"align="center":filters="olderArr":filter-method="filterHandler"></el-table-column><el-table-columnprop="name"label="员工"width="100"align="center":filters="staffArr":filter-method="filterHandler"></el-table-column><el-table-column prop="num" width="80" label="服务次数" align="center"><template slot-scope="scope"><div class="red bold">{{ scope.row.num }}</div></template></el-table-column><el-table-columnv-for="(item, i) in allDay":key="i":prop="item + ''":label="item + ''"align="center"width="50"><template slot-scope="scope"><iv-if="scope.row[item]"class="el-icon-star-on blue size-20 bold"></i></template></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{date: "王小虎",name: "王小虎1",address: "6",1: true,2: true,3: true,4: true,5: true,6: false,7: false,8: false,},{date: "王虎",name: "王小1",address: "6",1: false,2: false,3: false,4: false,5: false,6: true,7: true,8: true,},],olderArr: [], // 服务对象过滤列表staffArr: [], // 员工过滤列表allDay: 30, // 当前月总天数};},watch: {// 监听表格数据变化，动态渲染服务次数tableData: {handler(newName, oldName) {console.log(newName);newName.forEach((item) => {let arr = Object.values(item).filter((el) => {return el == true;});item.num = arr.length + " / " + item.address;});},immediate: true,deep: true,},},mounted() {},methods: {init() {// 通过源数据获取服务对象和员工的过滤列表// 获取当前月的总天数let arr1 = [];let arr2 = [];this.tableData.forEach((item) => {arr1.push({text: item.date,value: item.date,});arr2.push({text: item.name,value: item.name,});let arr3 = Object.values(item).filter((el) => {return el == true || el == false;});this.allDay = arr3.length;});this.olderArr = arr1;this.staffArr = arr2;},clickCell(row, column, cell, event) {// console.log(1, row);// console.log(2, column, row[column.label]);row[column.label] = !row[column.label];// console.log(this.tableData);},filterHandler(value, row, column) {const property = column["property"];return row[property] === value;},},
};
</script>
<style lang="scss" scoped></style>

element——table使用表格形式给员工排班相关推荐

使用.Net Core与Google Optimization Tools实现员工排班计划Scheduling
上一篇说完<Google Optimization Tools介绍>,让大家初步了解了Google Optimization Tools是一款约束求解(CP)的高效套件.那么我们用.Net ...
餐厅员工排班软件市场现状研究分析报告-
辰宇信息咨询市场调研公司最近发布-<2022-2028中国餐厅员工排班软件市场现状研究分析与发展前景预测报告> 内容摘要本文研究中国市场餐厅员工排班软件现状及未来发展趋势,侧重分析在中国 ...
2022-2028全球与中国餐厅员工排班软件市场现状及未来发展趋势
辰宇信息咨询市场调研公司最近发布-<2022-2028全球与中国餐厅员工排班软件市场调研报告> 内容摘要本文重点分析在全球及中国有重要角色的企业,分析这些企业餐厅员工排班软件产品的市场规 ...
员工排班优化员工排班 java 排班
最近在做员工排班那块,要求要有多人多日期排班,于是做成如下效果: 左边是要排班的人员列表,右边是选中人员列表以及开始日期结束日期班制等信息. 实现方法是当点击提交的时候先遍历人员列表, ...
mysql员工星期排班表设计_vue+element项目做员工排班表
人事管理人员排班上一周新增排班下一周 {{nextMonday}} 星期一 ~ {{lastsunday}} 星期天 show-overflow-tooltip :label="mo ...
(matlab代码分享，可运行) 多技能员工排班调度多目标优化（技能熟练度包含学习型、遗忘型）（Part 1）
一.技能值不变的多技能员工调度优化模型 1.问题描述对于企业管理者来说,如何合理的分配员工去完成任务,是降低企业运行费用,提升企业产品开发的重要手段.现代化企业需要制定一套科学的方法对员工进行任务分 ...
mysql查询员工排班信息_考勤管理信息系统人员排班管理及查询
原标题:考勤管理信息系统人员排班管理及查询考勤管理信息系统人员排班管理及查询考勤管理信息系统在企业的生产实践中,为了保证生产的正常进行,常需要将员工一个月的上班情况作好规划并逐一罗列好,并记录在 ...
使用vue-print-nb打印element table时表格打印不全的问题
elment的表格设置宽度为100%之后打印还是不能将表格打印完整如下图 1.寻找问题为什么会出现这种情况,打开控制台查看代码原来是el-table 会计算100%宽度为具体多少px 然后再计算 ...
排班系统c语言设计说明,帮我设计一个关于员工排班的C语言程序
给你个c++版本做参考: #include #include #include #include int main(int argc,char *argv[]) { std::vector arr[7 ...

element——table使用表格形式给员工排班

功能清单

element——table使用表格形式给员工排班相关推荐

最新文章

热门文章