使 el-dialog能自主改变大小

要使 el-dialog 能自主改变大小，可以使用 element-ui 提供的 `el-dialog` 的 `resizable` 属性。

示例代码如下：

<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :resizable="resizable">
    <p>{{ message }}</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      title: 'Dialog',
      message: 'Hello, world!',
      dialogVisible: false,
      resizable: true // 开启可改变大小
    }
  }
}
</script>

在 `el-dialog` 中设置 `resizable` 属性为 `true` 即可开启可改变大小。

如果需要设置 `el-dialog` 的最小宽度和最小高度，可以使用 `min-width` 和 `min-height` 属性。

示例代码如下：

<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :resizable="resizable" :style="{ 'min-width': minWidth + 'px', 'min-height': minHeight + 'px' }">
    <p>{{ message }}</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      title: 'Dialog',
      message: 'Hello, world!',
      dialogVisible: false,
      resizable: true, // 开启可改变大小
      minWidth: 400, // 最小宽度
      minHeight: 200 // 最小高度
    }
  }
}
</script>

在 `el-dialog` 中设置 `min-width` 和 `min-height` 属性即可设置最小宽度和最小高度。