要在打开弹窗时将滚动条回到顶部，可以使用 Vue 的 nextTick 方法，确保在 DOM 更新后执行滚动操作。以下是一个示例代码，演示了如何实现这个功能：
<template>
<a-modal
v-model:open="isModalVisible"
:title="modalTitle"
width="1500px"
:bodyStyle="{ padding: '16px', maxHeight: 'calc(95vh - 200px)', overflowY: 'scroll' }"
@afterOpen="scrollToTop" <!-- 在打开弹窗后调用 scrollToTop -->
>
<!-- 弹窗内容 -->
</a-modal>
</template>
<script>
export default {
data() {
return {
isModalVisible: false,
modalType: '',
};
},
computed: {
modalTitle() {
if (this.modalType === 'add') return "新增入账申请";
if (this.modalType === 'detail') return "查看入账申请";
if (this.modalType === 'update') return "更新入账申请";
return "入账申请";
}
},
methods: {
scrollToTop() {
this.$nextTick(() => {
const modalBody = document.querySelector('.ant-modal-body');
if (modalBody) {
modalBody.scrollTop = 0; // 将滚动条位置设置为顶部
}
});
}
}
};
</script>
注意事项：
- 确保你有正确的类选择器（这里使用的是
.ant-modal-body，根据你的 UI 库可能需要调整）。 - 使用
@afterOpen或相关的事件来触发scrollToTop方法，确保在模态框完全打开后执行。 - 在
<a-modal>的 props 中，如果存在条件渲染，请注意语法的准确性。
内容由零声教学AI助手提供，问题来源于学员提问
