vue 使用Element UI - v-infinite-scroll实现鼠标滚轮滚动带多列文字有标题的文字栏

可以使用 Element UI 中的 v-infinite-scroll 指令来实现鼠标滚轮滚动带多列文字有标题的文字栏。v-infinite-scroll 可以在滚动到指定元素底部时触发指定的回调函数，因此可以用于实现滚动加载。

以下是示例代码：

<template>
  <div class="text-column" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading">
    <div class="title">{{ title }}</div>
    <div class="text-container">
      <div class="column" v-for="text in textList" :key="text">{{ text }}</div>
    </div>
    <div v-if="loading" class="loading">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "My Text Column",
      textList: [
        "Column 1 Text 1",
        "Column 1 Text 2",
        "Column 1 Text 3",
        "Column 1 Text 4",
        "Column 1 Text 5",
        "Column 2 Text 1",
        "Column 2 Text 2",
        "Column 2 Text 3",
        "Column 2 Text 4",
        "Column 2 Text 5",
        "Column 3 Text 1",
        "Column 3 Text 2",
        "Column 3 Text 3",
        "Column 3 Text 4",
        "Column 3 Text 5"
      ],
      loading: false
    };
  },
  methods: {
    loadMore() {
      // 模拟异步加载数据
      this.loading = true;
      setTimeout(() => {
        this.textList = this.textList.concat([
          "Column 1 Text 6",
          "Column 2 Text 6",
          "Column 3 Text 6"
        ]);
        this.loading = false;
      }, 1000);
    }
  }
};
</script>

<style>
.text-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  height: 300px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.text-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.column {
  width: calc(33.33% - 10px);
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.loading {
  margin-top: 20px;
  font-size: 16px;
  color: #999;
}
</style>

在上面的代码中，我们使用了 Element UI 的 v-infinite-scroll 指令，并将其应用于包含多列文本和标题的 div 元素上。我们还设置了 infinite-scroll-disabled 属性，以防止在加载更多数据时重复触发回调函数。

当用户滚动到底部时，loadMore 方法将被调用，并模拟异步加载更多数据。在加载数据时，我们将 loading 设置为 true，以显示加载动画。当数据加载完成时，我们将新数据添加到 textList 中，并将 loading 设置为 false，以隐藏加载动画。

通过这种方式，我们就可以使用 Element UI 的 v-infinite-scroll 指令来实现一个带有多列文本和标题的滚动文字栏，并支持鼠标滚轮滚动和滚动加载。