el-dialog添加style没有效果

您可以尝试以下几种方法来为 `el-dialog` 添加样式：

1. 使用 `custom-class` 属性：在 `el-dialog` 标签上添加 `custom-class` 属性，并为其指定一个自定义的类名。然后，在您的 CSS 文件中编写对应的样式。

<el-dialog custom-class="my-dialog">
  <!-- 对话框内容 -->
</el-dialog>

.my-dialog {
  /* 添加您的样式 */
}

2. 直接在 `el-dialog` 标签上添加内联样式：在 `el-dialog` 标签上使用 `style` 属性，直接添加您需要的样式。

<el-dialog style="width: 500px;">
  <!-- 对话框内容 -->
</el-dialog>

请确保您的样式表达式正确，且没有被其他样式覆盖。如果以上方法都无效，可能是由于其他样式或配置的冲突导致，请检查您的代码，特别是与对话框相关的父级元素或其他组件的样式。

相关问题

el-dialog添加style没有笑果

你可以尝试在 el-dialog 标签上添加一个名为 "custom-class" 的属性，并给它赋予你想要的样式类名。然后在你的样式表中定义该样式类，以实现自定义样式。例如：

<el-dialog custom-class="my-dialog" :visible.sync="dialogVisible">
  <!-- 对话框内容 -->
</el-dialog>

.my-dialog {
  /* 自定义样式 */
}

这样，你就可以在 `my-dialog` 类中定义你想要的样式，并将其应用于 el-dialog 组件。这种方法可以让你更灵活地控制对话框的样式。希望这对你有所帮助！如有其他问题，请随时提问。

如何在el-dialog中嵌入一个div，撑满el-dialog，随着el-dialog的变化而变化

你可以在 `el-dialog` 中添加一个 `div`，并设置其 `position` 为 `absolute`，以实现撑满 `el-dialog` 的效果，代码如下：

<template>
  <el-dialog>
    <div class="content"></div>
  </el-dialog>
</template>

<style>
  .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>

然后，你可以使用 `watch` 监听 `el-dialog` 的变化，以动态更新 `content` 的大小，代码如下：

<script>
  export default {
    data() {
      return {
        dialogWidth: null,
        dialogHeight: null
      }
    },
    watch: {
      '$refs.dialog': {
        handler(val) {
          this.dialogWidth = val.$el.clientWidth;
          this.dialogHeight = val.$el.clientHeight;
        },
        immediate: true
      },
      dialogWidth(val) {
        this.$nextTick(() => {
          this.$refs.content.style.width = val + 'px';
        });
      },
      dialogHeight(val) {
        this.$nextTick(() => {
          this.$refs.content.style.height = val + 'px';
        });
      }
    }
  }
</script>

在上述代码中，我们使用了 `$refs` 获取 `el-dialog` 和 `content` 的引用，并通过 `$nextTick` 等待 DOM 更新后，动态设置 `content` 的宽高，从而实现了 `content` 随着 `el-dialog` 变化而变化的效果。