vue中el-table一天的时间段预约展示

在Vue中，如果你想要在`el-table`组件中展示一天的时间段预约，你可以这样做：

首先，安装Element UI库，因为它包含`el-table`等丰富的表格组件。在你的项目中运行`npm install element-ui`或`yarn add element-ui`。

然后，在你的Vue组件模板中，创建一个`el-table`，并定义列结构。例如：

<template>
  <el-table :data="timeSlots" border>
    <el-table-column type="index" label="时间"></el-table-column>
    <el-table-column prop="title" label="时间段" width="180">
      <!-- 使用v-for遍历每个预约 -->
      <template slot-scope="scope">
        {{ scope.row.title }} - {{ scope.row.end }}
      </template>
    </el-table-column>
    <el-table-column label="状态" prop="status" width="120">
      <!-- 根据预约状态显示不同颜色或图标 -->
      <template slot-scope="scope">
        <span v-if="scope.row.status === '预约中'" :style="{ color: '#ff5c74', fontSize: '14px' }">预约中</span>
        <span v-else-if="scope.row.status === '已取消'" :style="{ color: '#909399', fontSize: '14px' }">已取消</span>
        <span v-else>待预约</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      timeSlots: [
        { title: '08:00-09:00', end: '09:00', status: '预约中' },
        // ... 更多时间段数据
      ]
    };
  }
};
</script>

在这个例子中，我们定义了一个`timeSlots`数组，其中包含了时间、结束时间和状态信息。`el-table-column`用于定义每一列的内容，通过`slot-scope`可以访问到当前行的数据。