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