vue3 el-dialog设置表单滚动条到顶部
时间: 2023-07-31 17:07:31 浏览: 207
你可以在打开 `el-dialog` 的时候设置 `scrollTop` 属性为0来将表单滚动条置于顶部,具体代码如下:
```javascript
// 获取到el-dialog的DOM元素
const dialogEl = document.querySelector('.el-dialog')
// 将表单滚动条置于顶部
dialogEl.scrollTop = 0;
```
你可以在 `el-dialog` 的 `opened` 事件中调用上面的代码来实现这个功能,具体代码如下:
```html
<template>
<el-dialog
title="Dialog Title"
:visible.sync="dialogVisible"
@opened="handleDialogOpen"
>
<el-form>
<!-- 表单内容 -->
</el-form>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
handleDialogOpen() {
// 获取到el-dialog的DOM元素
const dialogEl = document.querySelector('.el-dialog')
// 将表单滚动条置于顶部
dialogEl.scrollTop = 0;
},
},
};
</script>
```
以上代码可以确保每次打开 `el-dialog` 时都将表单滚动条置于顶部。
阅读全文