el-scrollbar随着内容自动滚动

滚动条只有在内容超出他的高度时才会出现，那么之前他的scrollHeight都是0，如果想让滚动条随着内容的增加而往底部滚动，可以用如下方法：

1、首先需要给滚动条设置“ref“值，这里的ref是个对象，当随着”outputMessage“的数组长度增加的时候，滚动条就会往底部移动。

  <el-tab-pane  :label="$t('flashTest.info')">
        <el-scrollbar height="200px" ref="scrollbarOutputsRef" always>
           <p
            :class="{
           'error-text': item.type === 'error',
           'common-text': item.type === 'common'
           }"
            v-for="item in outputMessages"
            :key="item"
            class="scrollbar-item"
            >{{ item.message }}</p>
          </el-scrollbar>
        </el-tab-pane>

scrollbar的ref有以下属性
wrapRef--对象类型：滚动条的scrollHeight、scrollWidth等等属性
handleScroll（触发滚动事件）--函数类型 ()=> {}
scrollTo（滚动到一组特定坐标）--函数类型： (number， number) => {}
如果是横向滚动条，那么第二个参数就可以填为0，第一个参数就填需要滚动到的位置
如果是纵向滚动条，那么第一个参数就可以填为0， 第二个参数就填纵向需要滚动的位置
setScrollTop(设置滚动条到底部的距离)--函数类型 (number) =>{}
setScrollLeft(设置滚动条到左边的距离)--函数类型 (number) => {}
update(手动更新滚动条状态)--函数类型 () => {}

2、设置一个”距离值“，每次调用这个”listenoutputScrollbarTop“函数时，就让滚动条的”scrollTop“递增值，这个值一定要比每一条数据的高度大，他才会自动滚动，在这里，我的每个”item“的高度在15px左右，所以我设置的距离为20。

之后调用它的ref值中的setScrollTop函数，传每次的距离进去。

const scollbarOutputRef = ref({})
const outputSScrollbarDistance = ref(0)

const listenOutputScrollbarTop  = async(itemRef) => {
  await nextTick().then(()=> {
    outputsScrollbarDistance.value += 20
    itemRef.setScrollTop(outputsScrollbarDistance.value)
  })
}