element的el-dialog 通过JS实现打开居中

Element UI 的 `el-dialog` 组件是一个用于显示模态对话框的组件。如果你想通过 JavaScript 动态地让弹出框居中显示，可以利用 Vue.js 的数据绑定和 CSS 样式调整。首先，在 HTML 中包含 el-dialog，并给它一个 ref 属性以便于后续操作：

<template>
  <div>
    <button @click="openDialog">点击打开 dialog</button>
    <el-dialog :visible.sync="dialogVisible" :center="true" ref="dialogRef">
      <!-- dialog内容 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
  },
};
</script>

然后，在 `methods` 对象中，我们创建了一个 `openDialog` 方法，当按钮被点击时，会将 `dialogVisible` 数据属性设置为 `true`，这会触发 dialog 的显示。

对于居中效果，Element UI 默认会处理这个，因为我们设置了 `:center="true"`。如果需要自定义样式，可以在 CSS 文件中针对 `el-dialog` 或其内部元素添加样式，比如：

.el-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}