el-dialog用v-if控制不同弹窗的显示

可自定义弹窗的名称，宽度，是否可见；页面中可在一个dialog中写，内部用v-if控制不同弹窗的显示

    <el-dialog :title="dialog.title" :visible.sync="dialog.visible" :width="dialog.width" append-to-body>
      <div v-if="dialog.title == '查看' || dialog.title == '填写' || dialog.title == '审核'">
      </div>
      <!-- 驳回原因弹框 -->
      <div v-if="dialog.title == '查看驳回原因' || dialog.title == '驳回'">
      </div>
      <!-- 填写弹窗操作 -->
      <span slot="footer" class="dialog-footer" v-if="dialog.title == '填写'">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
      <!-- 审核弹框操作 -->
      <span slot="footer" class="dialog-footer" v-if="dialog.title == '审核'">
        <el-button type="danger" @click="reject">驳 回</el-button>
        <el-button type="success" @click="dialog.visible = false">通 过</el-button>
      </span>
    </el-dialog>

data():

dialog: {
        title: "",
        width: "",
        visible: false,
},

methods:

    // 驳回原因 按钮
    handleView(row) {
      this.dialog = {
        title: '查看驳回原因',
        width: '40%',
        visible: true
      }
    },