允许三列中的一列在vuejs中可滚动

<template>
  <div class="container">
    <div class="column" id="column1">
      <!-- 第一列内容 -->
    </div>
    <div class="column" id="column2">
      <!-- 第二列内容 -->
    </div>
    <div class="column" id="column3" v-bind:style="{ overflowY: scrollable ? 'scroll' : 'hidden' }" v-on:scroll="handleScroll">
      <!-- 第三列内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollable: false
    };
  },
  methods: {
    handleScroll() {
      // 处理滚动事件
    }
  }
};
</script>

<style>
.container {
  display: flex;
}

.column {
  flex: 1;
  height: 100vh;
  border: 1px solid #ccc;
}

#column3 {
  overflow-y: hidden;
}
</style>