vue中实现第一列为时间第二列为状态的带滚动条栏目，标题不滚动

您可以使用以下代码来实现您的需求：

<template>
  <div class="container">
    <div class="time-column">
      <div class="time-item" v-for="time in times">{{ time }}</div>
    </div>
    <div class="status-column">
      <div class="status-item" v-for="status in statuses">{{ status }}</div>
    </div>
    <div class="content">
      <div class="content-item" v-for="(item, index) in items" :key="index">
        <div class="title">{{ item.title }}</div>
        <div class="description">{{ item.description }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      times: [
        "9:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
        "21:00",
        "22:00",
        "23:00"
      ],
      statuses: ["状态1", "状态2", "状态3", "状态4", "状态5"],
      items: [
        {
          title: "标题1",
          description: "描述1"
        },
        {
          title: "标题2",
          description: "描述2"
        },
        {
          title: "标题3",
          description: "描述3"
        },
        {
          title: "标题4",
          description: "描述4"
        },
        {
          title: "标题5",
          description: "描述5"
        },
        {
          title: "标题6",
          description: "描述6"
        },
        {
          title: "标题7",
          description: "描述7"
        },
        {
          title: "标题8",
          description: "描述8"
        },
        {
          title: "标题9",
          description: "描述9"
        },
        {
          title: "标题10",
          description: "描述10"
        }
      ]
    };
  }
};
</script>

<style>
.container {
  display: flex;
  position: relative;
  overflow: hidden;
  height: 300px;
}

.time-column,
.status-column {
  position: fixed;
  top: 0;
  width: 100px;
  height: 100%;
  background-color: #f0f0f0;
  overflow-y: scroll;
}

.time-item,
.status-item {
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.status-column {
  left: 100px;
}

.content {
  margin-left: 100px;
  overflow-y: scroll;
}

.content-item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}

.title {
  font-weight: bold;
  position: sticky;
  left: 100px;
  background-color: #fff;
}

.description {
  margin-left: 100px;
}
</style>

在这个示例中，我们使用了`position: fixed`和`overflow-y: scroll`属性来设置时间列和状态列固定在页面顶部，并且可以滚动。我们还使用了`position: sticky`和`background-color: #fff`属性来使标题固定在内容区域的顶部，并且不会滚动。您可以根据需要调整样式和布局。