上面是實現(xiàn)的動態(tài)排班最終效果圖
實現(xiàn)思路：
1. 動態(tài)表格渲染：
在正式項目開發(fā)中table數(shù)據(jù)都是從接口獲取，假設(shè)有以下數(shù)據(jù)colData為Table的表頭（根據(jù)選中某個月份渲染），tableData為需展示的數(shù)據(jù) 需展示id（員工id），name（員工），counts（班次id）。表頭接口返回是是年月日，接到數(shù)據(jù)后轉(zhuǎn)化成周和天。用el-table是表頭插槽渲染到表格，表格第一列的人員姓名可以直接渲染，重點是counts班次是渲染，沒有點擊前默認未0，點擊單元格后填充班次數(shù)據(jù)，看一下這里的數(shù)據(jù)處理：
2. 表格單元格點擊選中渲染班次事件：
使用el-table的cellClicClick方法它會有返回數(shù)據(jù)，根據(jù)返回數(shù)據(jù)鎖定點擊的是某個單元格
動態(tài)填充單元格改變顏色渲染班次：this.$set(this.tableData[row.$index].counts, [index], data.id == 0 ? 0 : data)
點擊員工姓名選中整行： this.$set(this.tableData[row.$index].counts, index, data)
點擊選中整列： this.$set(item.counts, val, data.id === 0 ? 0 : data)
3.點擊單元格，整行，整列后表格的選中顏色效果
使用el-table的cell-style方法，返回row（行數(shù)據(jù)），rowIndex（行下標），columnIndex（列下標），判斷選中的單元格然后改變背景顏色
以上是整個動態(tài)排班管理的實現(xiàn)思路，還有很多細節(jié)自己可以根據(jù)自己項目的需求來調(diào)整。有問題歡迎來留言！
