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

最新推荐文章于 2024-12-02 19:25:48 发布

沙雕JavaScripter

最新推荐文章于 2024-12-02 19:25:48 发布

阅读量572

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/TianGuaJSTec/article/details/125439213

版权

这篇博客详细介绍了如何在前端使用EL-Table组件实现自定义表头和表格内容的展示，包括设置表格列宽、居中对齐、显示溢出提示等。同时，展示了如何通过JavaScript处理表格数据，如获取用户排班信息并根据日期显示不同颜色的按钮。此外，还涉及到按钮的点击事件，用于打开用户排班对话框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义表头和表格内容

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