el-table实现课表

在ECharts Table (el-table) 中，它是一个用于展示数据表格的强大组件，常用于Vue.js的Element UI库中。如果你想要用el-table实现课程表，你可以按照以下步骤操作：

1. **安装依赖**：
首先确保你在项目中已经安装了Element UI，如果没有，可以使用`npm install element-ui` 或 `yarn add element-ui`来安装。

2. **引入组件**：
在你的Vue组件文件里，import ElTable 和相关的列定义如ElColumn。

<template>
  <el-table ref="table" :data="courseList">
    <!-- ... -->
  </el-table>
</template>

<script>
import { ElTable, ElColumn } from 'element-ui';

export default {
  components: {
    ElTable,
    // 如果有列需要自定义，比如教师名、课程名等
    TeacherNameColumn: () => ({
      render: (h, params) => h('span', params.row.teacherName)
    }),
    CourseNameColumn: () => ({
      render: (h, params) => h('span', params.row.courseName)
    })
  },
  data() {
    return {
      courseList: [
        // 假设这是你的课程数据，包括字段如teacherName、courseName等
        {
          teacherName: '张三',
          courseName: '计算机科学入门'
          // 其他课程信息...
        },
        // 更多课程...
      ]
    };
  }
};
</script>

3. **配置列**：
使用ElColumn定义每列的数据格式和样式，包括标题和显示内容。

4. **事件处理**：
可以利用el-table提供的内置事件，如`@selection-change`处理选中行的操作，`@row-click`处理点击行的操作。

<template>
  <el-table
    ref="table"
    :data="courseList"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
  >
    <el-column type="index"></el-column> <!-- 列头序号 -->
    <el-column prop="teacherName" label="教师姓名" :render="TeacherNameColumn"></el-column>
    <el-column prop="courseName" label="课程名称" :render="CourseNameColumn"></el-column>
    <!-- 添加更多列... -->
  </el-table>
</template>

<script>
// ... 在data中添加处理函数
methods: {
  handleSelectionChange(selection) {
    console.log('选择了以下课程：', selection);
  },
  handleRowClick(row) {
    console.log(`单击了行：${JSON.stringify(row)}`);
  }
}
</script>