el-dialog底部按钮居中

你可以在el-dialog中添加一个自定义的底部插槽（footer slot），然后在插槽中使用flex布局将按钮居中。

示例代码如下：

<el-dialog :visible="dialogVisible">
  <template v-slot:footer>
    <div style="display: flex; justify-content: center;">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </template>
</el-dialog>

其中，`display: flex; justify-content: center;`是用来将插槽中的内容水平居中的样式。你可以根据自己的需要添加其他样式。

相关问题

如何让el-button 在 el-dialog中水平居中

可以通过设置 `.el-dialog__footer` 的样式来让 `el-button` 在 `el-dialog` 中水平居中。

首先，在 `el-dialog` 中添加一个 `footer` 插槽，然后在插槽中添加 `el-button`。

<el-dialog>
  <template #footer>
    <el-button>按钮</el-button>
  </template>
</el-dialog>

然后，在 `style` 中设置 `.el-dialog__footer` 的样式，将其内部子元素水平居中即可：

.el-dialog__footer {
  text-align: center;
}

.el-dialog__footer button {
  margin: 0 auto;
  display: inline-block;
}

这样，`el-button` 就会水平居中在 `el-dialog` 的底部。

elementui dialog footer居中

Element UI 的 Dialog 组件默认是没有提供直接设置 footer 居中的样式，如果你想让 Dialog 的底部内容居中，可以自定义 CSS 样式或者利用 Vue.js 的 v-bind 或者 ref 特性来添加。

这里有一个简单的例子：

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="标题"
    class="custom-dialog"
  >
    <div slot="footer" class="custom-footer">
      <button type="primary" @click="dialogVisible = false">确定</button>
      <!-- 可能需要的其他按钮 -->
    </div>
  </el-dialog>
</template>

<style scoped>
.custom-dialog {
  position: relative;
}

.custom-footer {
  text-align: center; /* 这里设置了居中 */
  display: flex;
  justify-content: center; /* 如果想水平居中也可以加这个 */
}
</style>

在这个例子中，我们给 Dialog 添加了一个类 `.custom-dialog`，然后在 `footer` 的容器上设置了 `text-align: center` 和 `display: flex; justify-content: center` 来达到居中效果。

如果你已经绑定了 `ref` 到 Dialog 上，可以这样操作：

<template>
  <el-dialog ref="dialogRef" ...>
    ...
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: true,
    };
  },
  mounted() {
    this.$refs.dialogRef.$el.querySelector('.el-dialog__footer').style.textAlign = 'center';
  },
};
</script>

这样在页面加载后动态设置 footer 的文本对齐方式。