vue element在dialog添加滚动条

要在 Vue Element 的 Dialog 中添加滚动条，你可以使用 `el-dialog` 组件的 `body-style` 属性，并设置 `overflow-y: auto` 样式，示例代码如下：

<template>
  <el-dialog title="Dialog Title" :visible="dialogVisible" :close-on-click-modal="false" :body-style="{overflowY: 'auto'}">
    <p>Dialog Content</p>
    <p>Dialog Content</p>
    <p>Dialog Content</p>
    <p>Dialog Content</p>
    <p>Dialog Content</p>
    <p>Dialog Content</p>
    <p>Dialog Content</p>
    <p>Dialog Content</p>
    <p>Dialog Content</p>
    <p>Dialog Content</p>
    <p>Dialog Content</p>
  </el-dialog>
</template>

在上面的代码中，`body-style="{overflowY: 'auto'}"` 表示设置 `el-dialog` 组件的内容区域为自动垂直滚动条，当内容高度超过对话框高度时，会自动出现滚动条，让用户可以滚动查看所有内容。

相关问题

vue element el-dialog 添加滚动效果

要在 Vue Element 中的 el-dialog 中添加滚动效果，可以在弹框的内容区域使用自定义的样式来实现。具体的实现步骤如下：

1. 在弹框的内容区域中添加一个容器元素，例如使用 div 元素，并设置其样式为：

.dialog-container {
  max-height: 400px; /* 设置最大高度 */
  overflow-y: auto; /* 设置垂直方向滚动 */
}

2. 在 el-dialog 的内容区域中使用上述容器元素进行包裹，例如：

<template>
  <el-dialog title="Dialog Title" :visible.sync="dialogVisible">
    <div class="dialog-container">
      <!-- 弹框内容区域 -->
    </div>
  </el-dialog>
</template>

这样就可以在 el-dialog 中实现滚动效果了。需要注意的是，如果弹框内容区域的高度超过了设置的最大高度，就会显示滚动条。

vue 弹窗实现滚动条

在 Vue 中实现弹窗中的滚动条，可以使用第三方插件如 element-ui 或者自行编写样式实现。

使用 element-ui：

1. 在组件中引入 element-ui：

import { Dialog } from 'element-ui';

2. 在弹窗组件中添加 `v-dialog` 指令，并设置 `max-height` 和 `overflow-y` 样式：

<el-dialog v-dialog="{ top: '10vh' }" title="弹窗标题" :visible.sync="dialogVisible">
  <div style="max-height: 400px; overflow-y: auto;">
    // 弹窗内容
  </div>
</el-dialog>

使用自定义样式：

1. 在弹窗组件中添加滚动条样式：

<style>
  .dialog-content {
    max-height: 400px;
    overflow-y: auto;
  }
  .scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .scrollbar::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #ccc;
  }
</style>

2. 在弹窗组件中添加滚动条样式类名：

<template>
  <div class="dialog-wrapper">
    <div class="dialog-content scrollbar">
      // 弹窗内容
    </div>
  </div>
</template>