vue+element的表格（el-table）排班情况表（2024-05-09）

以下是一个使用Vue和Element UI创建排班表的简单示例。此示例假设你已经在项目中安装并配置了Vue和Element UI。

<template>
  <el-table :data="schedule" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column label="早班">
      <el-table-column prop="morningClass1.teacher" label="班次">
      </el-table-column>
      <el-table-column prop="morningClass1.subject" label="科目">
      </el-table-column>
    </el-table-column>
    <el-table-column label="晚班">
      <el-table-column prop="eveningClass1.teacher" label="班次">
      </el-table-column>
      <el-table-column prop="eveningClass1.subject" label="科目">
      </el-table-column>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      schedule: [
        {
          date: '2024-05-09',
          morningClass1: {
            teacher: '张老师',
            subject: '数学'
          },
          eveningClass1: {
            teacher: '李老师',
            subject: '语文'
          }
        }
        // ...其他日期的排班信息
      ]
    };
  }
};
</script>

在这个例子中，我们定义了一个名为schedule的数组，它包含了日期、上午班次1和下午班次1的信息。在模板中，我们使用el-table组件来展示排班表，并通过嵌套el-table-column来表示上午和下午的班次及其教师和科目。

请根据实际需求调整schedule数组中的数据，以及表格中的列和属性名称。