vue3组合式api+typescript+element plus，向el-scrollbar组件中动态增添列表项，当添加项目出现滚动条时，如何自动将滚动条置底，显示底部新增内容呢？

Z时代
2024-03-14
分类：IT

vue3组合式api+typescript+element plus，向el-scrollbar组件(高度为外层容易的100%)中动态增添列表项，当添加项目出现滚动条时，如何自动将滚动条置底，显示出底部新增内容呢（置底后不影响用户主动去滑动滚动条）？

        <div class="warp_cont question-wrap font-middle" ref="qaWrapRef">
            <el-scrollbar always ref="qaScrollbarRef">
                <div class="qa_wrap_inner" ref="qaWrapInnerRef">
                    <!-- 问题列表 -->
                    <div class="question-wrap_item" v-for="(item, index) in alarmCase_store.questionList"
                        :key="item.questionRes.id">
                        <!-- 问题 -->
                        <div class="answer-desc">
                            <div class="answer-desc_number">{{ index + 1 }}.</div>
                            <div class="answer-desc_desc">
                                <span v-html="item.questionRes.realsignTopic"></span>
                            </div>
                        </div>
                        <!-- 答案选项列表 -->
                        <div class="answer-options">
                            <!-- 答案选项(单个) -->
                            <div class="option-item" v-for="option_item in item.questionRes.answerReses"
                                :key="option_item.code">
                                <el-radio-group v-model="item.questionRes.answer_select"
                                    @change="((val: any) => { selectAnswerChange(val, item, option_item) })">
                                    <el-radio :label="option_item.code" border>
                                        <table class="el_r_table">
                                            <tr>
                                                <td>
                                                    <div v-html="option_item.content"></div>
                                                </td>
                                                </td>
                                            </tr>
                                        </table>
                                    </el-radio>
                                </el-radio-group>
                            </div>
                        </div>
            </el-scrollbar>        </div>

回答：

<template>
  <div class="warp_cont question-wrap font-middle">
    <el-scrollbar always ref="qaScrollbarRef">
      <div class="qa_wrap_inner">
        <!-- 问题列表 -->
        <div class="question-wrap_item" v-for="(item, index) in alarmCase_store.questionList"
            :key="item.questionRes.id">
            <!-- 问题 -->
            <div class="answer-desc">
                <div class="answer-desc_number">{{ index + 1 }}.</div>
                <div class="answer-desc_desc">
                    <span v-html="item.questionRes.realsignTopic"></span>
                </div>
            </div>
            <!-- 答案选项列表 -->
            <div class="answer-options">
                <!-- 答案选项(单个) -->
                <div class="option-item" v-for="option_item in item.questionRes.answerReses"
                    :key="option_item.code">
                    <el-radio-group v-model="item.questionRes.answer_select"
                        @change="((val: any) => { selectAnswerChange(val, item, option_item) })">
                        <el-radio :label="option_item.code" border>
                            <table class="el_r_table">
                                <tr>
                                    <td>
                                        <div v-html="option_item.content"></div>
                                    </td>
                                    </td>
                                </tr>
                            </table>
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
const qaScrollbarRef = ref(null);
const scrollToBottom = async () => {
  await nextTick();  // 等待 DOM 更新
  const element = qaScrollbarRef.value.$el;  // 获取滚动元素
  element.scrollTop = element.scrollHeight;  // 滚动到底部
};
// 添加新的列表项
const addItem = () => {
  // 添加新的列表项...
  // 然后滚动到底部
  scrollToBottom();
};
const selectAnswerChange = (val, item, option_item) => {
  // 处理答案的选择...
};
</script>