el-scrollbar和el-input让滚动条始终在最底部

`el-scrollbar` 是 Element UI 提供的一个用于处理滚动条的组件，它可以帮助你定制滚动条的样式和行为。如果你想让 `el-input`（Element UI 的输入框组件）总是显示滚动条并且始终保持在内容的最底部，你需要结合这两个组件来实现。通常情况下，你可以通过监听输入框内容的变化，当内容高度超过其可视区域高度时自动滚动到底部。

下面是一个简单的示例，展示如何做到这一点：

<template>
  <div ref="inputWrapper">
    <el-input v-model="content" :scroll-top="scrollTop"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '这是一个很长很长的内容，会超出视窗高度...',
      scrollTop: 0,
    };
  },
  mounted() {
    this.$refs.inputWrapper.addEventListener('scroll', () => {
      // 当滚动条到达底部时，设置scrollTop为最大值
      if (this.$refs.inputWrapper.scrollTop + this.$refs.inputWrapper.clientHeight === this.$refs.inputWrapper.scrollHeight) {
        this.scrollTop = this.$refs.inputWrapper.scrollHeight;
      }
    });
  },
  watch: {
    content(value) {
      // 每次内容变化时，检查是否需要滚动到底部
      if (value.length > this.$refs.inputWrapper.scrollHeight) {
        this.scrollTop = this.$refs.inputWrapper.scrollHeight;
      } else {
        this.scrollTop = 0; // 清除滚动
      }
    },
  },
};
</script>

在这个例子中，我们使用了 `ref` 来获取输入框容器元素，并监听它的 `scroll` 事件。当滚动到底部时，我们将 `scrollTop` 设置为 `scrollHeight`，这样就始终保持滚动条在最底部。