数据大屏 项目开发中，有一个组件因为元素过多需要滚动条显示，这里会有外部组件来激活某个元素，如果这个元素没有在可视区域的话，我们需要让滚动条滚动到对应的位置让激活的元素处于可视区域内。

要让滚动条让选中的项目处于可视区域，你可以使用 DOM 的 scrollIntoView 方法。首先，你需要为每个列表项添加一个 ref，然后在 selectItem 方法中，你可以获取到对应的 DOM 元素，并调用其 scrollIntoView 方法。

以下是一个示例：

<template>
  <!-- ... -->
  <div class="listBody">
    <div class="listBodyItem"
         :class="{ active: item.id === activeId }"
         @click="selectItem(item, index)"
         v-for="(item,index) in list" :key="index"
         :ref="`item-${index}`">
      <!-- ... -->
    </div>
  </div>
  <!-- ... -->
</template>

<script>
// ...
export default {
  // ...
  methods: {
    // ...
    selectItem(item, index) {
      this.activeId = item.id;
      this.$emit('getId', item.id);
      this.$emit('getList', this.list);
      this.$nextTick(() => {
        this.$refs[`item-${index}`][0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      });
    },
  }
}
</script>

在这个示例中，我们首先为每个列表项添加了一个 ref，其值为 item-${index}。然后，在 selectItem 方法中，我们使用 this.$refs[item-${index}].scrollIntoView({ behavior: 'smooth', block: 'nearest' }); 来让滚动条滚动到选中的项目。$nextTick 是用来确保 DOM 已经更新。