记录element el-table的自定义表头和表格

自定义表头和表格内容

<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}
				]