vue PerfectScrollbar 实现鼠标滚轮滚动带多列文字有标题不动的文字栏，第一列为时间第二列为状态

您可以使用 vue-perfect-scrollbar 插件来实现带多列文字的滚动条。以下是一个简单的示例代码：

<template>
  <div class="scrollbar-container">
    <div class="scrollbar-content">
      <div class="header">
        <div class="time">时间</div>
        <div class="status">状态</div>
      </div>
      <div class="rows" v-for="row in rows" :key="row.id">
        <div class="time">{{ row.time }}</div>
        <div class="status">{{ row.status }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import PerfectScrollbar from 'vue-perfect-scrollbar';

export default {
  components: {
    PerfectScrollbar,
  },
  data() {
    return {
      rows: [
        { id: 1, time: '10:00', status: '进行中' },
        { id: 2, time: '11:00', status: '已完成' },
        { id: 3, time: '12:00', status: '已取消' },
        { id: 4, time: '13:00', status: '进行中' },
        { id: 5, time: '14:00', status: '已完成' },
        { id: 6, time: '15:00', status: '已取消' },
        { id: 7, time: '16:00', status: '进行中' },
        { id: 8, time: '17:00', status: '已完成' },
        { id: 9, time: '18:00', status: '已取消' },
        { id: 10, time: '19:00', status: '进行中' },
        { id: 11, time: '20:00', status: '已完成' },
        { id: 12, time: '21:00', status: '已取消' },
        { id: 13, time: '22:00', status: '进行中' },
        { id: 14, time: '23:00', status: '已完成' },
        { id: 15, time: '00:00', status: '已取消' },
      ],
    };
  },
};
</script>

<style>
.scrollbar-container {
  height: 400px;
  width: 400px;
  position: relative;
}

.scrollbar-content {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  background-color: #f5f5f5;
  padding: 0 10px;
  font-weight: bold;
}

.rows {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 10px;
}

.time {
  flex: 0 0 80px;
}

.status {
  flex: 1;
}

/* Custom scrollbar style */
::v-deep .ps__rail-y {
  opacity: 0.6;
  width: 6px !important;
  background-color: #f5f5f5;
}

::v-deep .ps__thumb-y {
  width: 6px !important;
  background-color: #c5c5c5;
  border-radius: 3px;
}

::v-deep .ps__rail-x {
  display: none !important;
}

</style>

上述代码中，我们使用了 vue-perfect-scrollbar 插件来实现滚动条功能，并在滚动区域中添加了一个标题栏和多列数据。其中，时间和状态分别使用了不同的列来展示，并使用 flex 布局来控制它们的宽度和位置。

在样式中，我们定制了滚动条的样式，使其更加美观。需要注意的是，由于 vue-perfect-scrollbar 插件会动态生成 DOM 元素，因此我们需要使用 ::v-deep 伪元素来覆盖其样式。

您可以根据自己的需求修改上述代码，并在自己的项目中使用。希望能对您有所帮助！