vue 3看板 滚动列表样式

Vue 3 的看板滚动列表样式同样可以通过 CSS 进行设置，以下是一个基本的示例：

<template>
  <div class="board-container">
    <div class="board-column" v-for="(column, index) in columns" :key="index">
      <div class="column-header">{{ column.title }}</div>
      <div class="column-body" ref="columnBody" @scroll="handleScroll">
        <div class="card" v-for="card in column.cards" :key="card.id">{{ card.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          id: 1,
          title: 'To Do',
          cards: [
            { id: 1, title: 'Task 1' },
            { id: 2, title: 'Task 2' },
            { id: 3, title: 'Task 3' }
          ]
        },
        {
          id: 2,
          title: 'In Progress',
          cards: [
            { id: 4, title: 'Task 4' },
            { id: 5, title: 'Task 5' }
          ]
        },
        {
          id: 3,
          title: 'Done',
          cards: [
            { id: 6, title: 'Task 6' },
            { id: 7, title: 'Task 7' },
            { id: 8, title: 'Task 8' }
          ]
        }
      ]
    }
  },
  methods: {
    handleScroll(event) {
      // do something on scroll
    }
  }
}
</script>

<style>
.board-container {
  display: flex;
  overflow-x: auto;
  height: 100%;
}

.board-column {
  flex: 0 0 300px;
  margin-right: 16px;
}

.column-header {
  font-weight: bold;
  margin-bottom: 16px;
}

.column-body {
  height: calc(100% - 36px);
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 16px;
}

.card {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  margin-bottom: 16px;
  padding: 8px;
}
</style>

在上述示例中，`.board-container` 是一个固定高度、可横向滚动的容器。`.board-column` 是每个看板列的样式设置，包括了 `flex`、`margin-right` 等。`.column-header` 是每个看板列标题的样式设置，包括了 `font-weight` 和 `margin-bottom` 等。`.column-body` 是每个看板列的滚动列表样式设置，包括了 `height`、`overflow-y`、`border`、`border-radius` 和 `padding` 等。在 `handleScroll` 方法中，可以获取到滚动事件的信息，并进行相应的处理。

注意，Vue 3 的看板组件需要使用 `v-for` 指令来渲染看板列和卡片。在上述示例中，使用了 `v-for="(column, index) in columns"` 来遍历看板列，使用了 `v-for="card in column.cards"` 来遍历看板列中的卡片。同时，每个看板列的滚动列表需要添加 `ref="columnBody"`，以便在 `handleScroll` 方法中获取到对应的滚动事件。