el-dialog设置长和宽

el-dialog 是 Element UI 提供的一个对话框组件，可以通过设置它的 width 和 height 属性来调整对话框的宽度和高度。

示例代码如下：

<template>
  <div>
    <el-dialog
      title="对话框标题"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
      :height="dialogHeight"
    >
      <!-- 对话框内容 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false, // 对话框是否可见
      dialogWidth: '50%', // 对话框宽度
      dialogHeight: '300px', // 对话框高度
    };
  },
};
</script>

在上述代码中，通过设置 dialogWidth 和 dialogHeight 属性来控制对话框的宽度和高度。可以直接使用像素值或百分比来指定大小。

注意，el-dialog 组件的宽度默认是 '50%'，高度默认是 'auto'，所以如果不设置这两个属性，对话框会根据内容自动调整大小。

相关问题

多个el-dialog嵌套后 .el-dialog_body样式如何根据不同el-dialog区分设置

可以通过给每个 `el-dialog` 组件添加一个不同的 `class`，然后使用该 `class` 来区分设置不同的样式。

例如，假设你有两个 `el-dialog` 组件，一个是 `dialog-1`，另一个是 `dialog-2`，你可以给它们分别加上不同的 `class`：

<el-dialog class="dialog-1">
  ...
</el-dialog>

<el-dialog class="dialog-2">
  ...
</el-dialog>

然后在 CSS 中，你可以通过选择器来对不同的 `el-dialog` 组件进行不同的样式设置：

.dialog-1 .el-dialog__body {
  /* 设置 dialog-1 中 el-dialog__body 的样式 */
}

.dialog-2 .el-dialog__body {
  /* 设置 dialog-2 中 el-dialog__body 的样式 */
}

这样就可以根据不同的 `class` 区分设置不同的样式了。

怎么设置某一个el-dialog的el-dialog__body的padding，而不影响其他el-dialog

你可以为该特定的 `el-dialog` 元素设置一个独特的 `class`，然后使用该 `class` 来设置 `el-dialog__body` 的 `padding` 样式。比如：

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" :custom-class="'my-dialog'">
      <span slot="title">Dialog Title</span>
      <div class="el-dialog__body">
        Dialog Content
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">OK</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.my-dialog .el-dialog__body {
  padding: 20px;
}
</style>

在上面的代码中，我们为 `el-dialog` 元素设置了一个名为 `my-dialog` 的自定义 `class`，并使用该 `class` 来设置 `el-dialog__body` 的 `padding` 样式。这样就只会影响到具有 `my-dialog` 类的 `el-dialog` 元素，而不会影响到其他的 `el-dialog` 元素。