Vue如何控制el-dialog的body尺寸和背景颜色

在Vue中，你可以通过修改Element UI的`el-dialog`组件的样式来控制其body部分的尺寸和背景颜色。`el-dialog`组件提供了一些内联样式选项，但如果你想更精细地控制，你可以利用CSS或者在data里定义一些样式变量。

1. **通过内联属性**:
如果你只需要简单调整，可以在`el-dialog`标签中直接设置一些基本样式，例如:

   <el-dialog :style="{ width: '60%', backgroundColor: '#f5f5f5', padding: '20px' }">
     ...
   </el-dialog>

这样设置了宽度、背景颜色和内边距。

2. **通过CSS**:
如果需要更复杂的样式，你可以在Vue的`mounted()`生命周期钩子里动态添加CSS，例如：

   mounted() {
     document.head.innerHTML += `
       <style>
         .custom-dialog {
           width: 60%;
           background-color: #f5f5f5;
           padding: 20px;
         }
       </style>
     `;
   }

然后在`el-dialog`上应用这个类名：

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

3. **使用Vue的样式绑定**:
你也可以在数据里定义样式对象，然后在模板中绑定它：

   data() {
     return {
       dialogStyle: { width: '60%', backgroundColor: '#f5f5f5', padding: '20px' }
     }
   },
   
   template: `<el-dialog :style="dialogStyle">
                ...
              </el-dialog>`

这样每次需要改变样式时，只需更新`dialogStyle`对象即可。