自定义表头和表格内容
<el-table ref="multipleTable"
show-overflow-tooltip
:class="{'table-line-no': !tableLineNo}"
:height="tableHeight"
:data="tableData"
style="width: 100%">
<el-table-column show-overflow-tooltip
align="center"
width="120">
<template slot="header">
<div>
<p>初始班次</p>
</div>
</template>
<template slot-scope="scope">
<span class="begin-btn">{{ scope.row.beginScheduleName || '未设置' }}</span>
</template>
</el-table-column>
<el-table-column v-for="(item, index) in dateList"
:key="index"
width="120"
align="center">
<!-- 自定义表头 -->
<template slot="header">
<div>
<p>{{ item.day }}</p>
<p>{{ number2Chinese(item.week) }}</p>
</div>
</template>
<template slot-scope="scope">
<el-button class="user-schedule-btn"
:style="{
backgroundColor: getUserTableText(item.date, scope.row).color
}"
:disabled="new Date(item.date).getTime() <= Date.now() - 3600 * 1000 * 24 * 1"
@click="openUserScheduleDialog(getUserTableText(item.date, scope.row), item.date, scope.row)">
{{ getUserTableText(item.date, scope.row).scheduleName || '' }}
</el-button>
</template>
</el-table-column>
</el-table>
JS:
// 根据表头日期和员工排班表日期,显示表格文字
getUserTableText(headerDate, row) {
let text = {
scheduleName: '',
color: ''
};
row.userWorkSchedules.map((item) => {
if (item.calendarDay === headerDate) {
text = item;
if (text.scheduleName === '休息') {
item.color = '#dedee2';
}
}
});
text.ruleId = row.ruleId;
return text;
},
注:
tableDatas:[
{beginScheduleId: 49
beginScheduleName: "中班"
clearFlag: false
employeeId: 97
employeeName: "李唯一"
groupId: 28
groupName: "dfd"
id: 387
index: 0
ruleId: 21
ruleName: "春节值班"
userWorkSchedules: Array(30)}
]
dateList:[
{date: "2022-06-01"
day: "01"
week: 3}
]