el-dialog里面div加滚动条

你可以在 el-dialog 的 div 中使用 CSS 的 overflow 属性来实现滚动条。例如：

<el-dialog title="对话框" :visible.sync="dialogVisible">
  <div style="height: 200px; overflow: auto;">
    <!-- 内容 -->
  </div>
</el-dialog>

这里的 div 设置了高度为 200px，并且设置了 overflow 属性为 auto，这样当内容超过 200px 时，就会出现滚动条。你可以根据实际情况调整高度和 overflow 属性的值。

相关问题

el-dialog字数过多添加滚动条

如果el-dialog中的内容太多，超过弹窗的高度，可以通过添加滚动条来实现内容的滚动。可以在el-dialog的内容区域添加一个固定高度并设置overflow属性为auto来实现滚动条。具体的做法如下：

<el-dialog :visible="dialogVisible" title="弹窗标题">
  <div style="height: 300px; overflow: auto;">
    <!-- 弹窗内容 -->
  </div>
</el-dialog>

在这个例子中，我们把内容区域的高度设置为300px，并设置overflow属性为auto，这样当内容超过300px时，就会出现滚动条。你可以根据实际情况调整高度和overflow属性的值。

el-dialog里面是个div循环,给dialog加竖滚动条

在`el-dialog`组件中，如果内部包含一个通过循环渲染的`div`元素，并且内容超过对话框的高度，为了添加垂直滚动条，你可以这样做：

1. 首先，确保每个`div`都有固定的最小高度，这可以通过CSS样式设置，例如:

.dialog-content .scrollable-div {
  min-height: calc(100% - var(--dialog-padding-bottom)); /* 减去底部对话框边距 */
  overflow-y: auto; /* 添加滚动条 */
}

这里假设`.scrollable-div`是你循环生成的`div`的类名，`--dialog-padding-bottom`是`el-dialog`组件底部的内边距。

2. 确保`el-dialog`的`width`和`height`属性是固定的，或者通过JavaScript动态设置，以便滚动条可以生效。

3. 如果你使用的是Vue.js并且使用了Element UI库，你可以在组件模板中这样应用：

<template>
  <el-dialog :visible.sync="dialogVisible" width="400" height="600">
    <div v-for="(item, index) in items" :key="index" class="scrollable-div">{{ item.content }}</div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      items: ... // 你的数据源
    };
  },
  computed: {
    dialogPaddingBottom() {
      return parseInt(this.$refs.dialogElement.style.paddingBottom); // 获取实际底部边距
    }
  },
  methods: {
    handleScroll() {
      this.$refs.dialogElement.scrollTop = this.$refs.dialogElement.scrollHeight; // 刷新滚动条到最底
    }
  },
  mounted() {
    // 每次关闭并再次打开dialog时，强制刷新滚动位置
    this.handleScroll();
  }
};
</script>

请注意，在`mounted`生命周期钩子里，我们手动滚动到底部，这是因为当内容变化时，滚动条默认不会自动更新。