el-dialog如何使用

el-dialog是Element UI中的一个对话框组件，可以用于显示弹出窗口。使用el-dialog的步骤如下：

1. 首先需要在页面中引入Element UI库，可以通过CDN或者下载并引入本地文件的方式引入。

2. 在Vue组件中使用el-dialog组件，需要先在data中定义dialogVisible属性来控制对话框的显示状态，同时定义其他需要传递给对话框的数据。

3. 在template中使用el-dialog组件，设置其属性（如title、width、visible等）和插槽（如header、body、footer等）。

4. 在需要触发对话框显示的地方，通过调用方法（如click事件）来修改dialogVisible属性的值，实现对话框的显示与隐藏。

下面是一个简单的示例：

<template>
  <div>
    <el-button type="primary" @click="showDialog">打开对话框</el-button>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :width="dialogWidth">
      <span slot="header">{{ dialogHeader }}</span>
      <div slot="body">这是对话框的内容</div>
      <span slot="footer">这是对话框的底部</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '对话框标题',
      dialogHeader: '对话框头部',
      dialogWidth: '50%'
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

在上面的示例中，el-dialog组件被包裹在一个el-button组件中，当按钮被点击时，调用showDialog方法来显示对话框。对话框的标题、头部、宽度等属性都可以根据实际需求进行设置。