vue element 实现 时间线聊天效果

vue

<el-scrollbar ref="descScrollbar" style="height:100%">
    <el-timeline style="height: 400px">
      <el-timeline-item v-for="(desc, index) in descDetails" :key="index" :timestamp="desc.creator + ' - ' + desc.createTime" placement="top">
        <el-card style="height: 50px;" :body-style="{ padding: '5px', height: '40px' }">
          <p>{{ desc.desc }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
 </el-scrollbar>

生命周期的update钩子中调用

updated: function() {
    if (this.$refs['descScrollbar']) {
      this.scrollDown();
    }
  },

在页面update时加入调用method中方法

scrollDown() {
      this.$refs['descScrollbar'].wrap.scrollTop = this.$refs['descScrollbar'].wrap.scrollHeight;
    }

效果如下

image.png