el-dialog设置宽度自适应

在使用elementUI的对话框el-dialog中，设置的默认宽度是百分比，比如width=“30%”，这样对话框会随着页面的宽度而自适应。如果我们只想要，无论页面有多宽，对话框都是固定的宽度，不随着页面的宽度而自适应，可以通过el-dialog的custom-class属性来实现。具体步骤如下：
1. 在el-dialog中加入custom-class属性，这个属性是给该对话框加一个专属的class。
2. 在style中写样式，记得要加/deep/(less中的用法)，或::deep(普通的style中的用法) /deep/，设置对话框的宽度为固定值即可。

举个例子，如果我们想要设置一个宽度为480px的对话框，可以按照以下步骤进行设置：
1. 在el-dialog中加入custom-class属性，如custom-class="myDialog"。
2. 在style中写样式，如/deep/ .myDialog { width: 480px !important; }。

这样就可以实现el-dialog的宽度自适应了。

相关问题

el-dialog width如何自适应

可以使用CSS中的max-width属性来实现el-dialog的自适应宽度。具体做法是在el-dialog的样式中添加max-width属性，并将其设置为100%。这样el-dialog的宽度就会根据其父元素的宽度自适应。

示例代码如下：

<el-dialog :visible="dialogVisible" title="Dialog Title" :style="{ 'max-width': '100%' }">
  <p>Dialog Content</p>
</el-dialog>

<el-dialog的宽度

在使用elementUI的对话框el-dialog时，默认情况下宽度是以百分比来设置的，即会随着页面宽度的变化而自适应。如果你想要固定对话框的宽度，不受页面宽度影响，可以通过el-dialog的custom-class属性来实现。

具体操作如下：
1. 在el-dialog中添加custom-class属性，比如：`<el-dialog title="对话框标题" :visible.sync="dialogVisible" custom-class="custom-dialog">`
2. 在样式中使用/deep/或::deep选择器以及对应的class名，设置对话框的宽度，比如：`/deep/ .custom-dialog { width: 500px; }`

这样设置后，对话框的宽度将固定为500px，不会随着页面宽度的变化而自适应。同时，如果在同一个页面中使用不同的custom-class名称，它们之间的设置互不影响，可以独立控制各个对话框的宽度。<span class="em">1</span><span class="em">2</span>