vue.js - 如何处理element-ui VueJS的Dialog组件中的打开事件？

Question

我的 VueJS 项目中有使用 Boostrap 4 的工作代码。我在表中显示用户列表，每行都有链接“删除”。每个用户在该行中都有电子邮件。单击“删除”后，BS 4 模态框将在模态框正文中显示用户的电子邮件。模态有按钮、取消和是。 “取消”将关闭模态框，"is"将向后端调用 API 来删除用户。

这是表行中调用模态的代码:

<a   href="#" class="" data-toggle="modal" :data-email="user.email"  data-target="#exampleModal">Delete</a> 

这是用于处理组件安装时运行的 Modal 的 jQuery:

安装(){

    let $this = this
    $('#exampleModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
 var email = button.data('email')

      var modal = $(this)

      modal.find('.modal-body').html('<div>Are you sure you want to delete user:</div><div> ' + email + ' ?</div>')

      modal.find('.modal-footer #delete').on('click', function(e) {$this.deleteUser(email)})
    })

如何使用 element-ui 中的 Dialog 组件实现相同的效果？

对话框组件在此链接中记录: Dialog

对话框组件定义了打开等事件，但没有文档说明如何使用它们。所以我一无所知。

element-ui 对话框代码是:

<el-dialog id="eModal"
  title="Delete User"
  :visible.sync="dialogVisible" 

  >
  <span id="modal-body">Dynamic body content</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Yes</el-button>
  </span>
</el-dialog>

Answer 1

单击删除列中的按钮时，您可以指定选择的项目。

行模板:

<el-table-column>
  <template slot-scope="scope">
    <el-button @click="openDeleteDialog(scope.row)" type="text" 
       size="small">Delete</el-button>
  </template>
</el-table-column>

对话框模板:

    <el-dialog id="eModal"
      title="Delete User"
      :visible.sync="dialogVisible" 
    >
      <span id="modal-body">{{ selectedRow.name }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteCancel">Cancel</el-button>
        <el-button type="primary" @click="deleteOk">Yes</el-button>
      </span>
    </el-dialog>

// component
openDeleteDialog(row) {
  this.selectedRow = row;
  this.dialogVisible = true;
}

deleteCancel() {
  this.dialogVisible = false;
  this.selectedRow = null;
}

deleteOk() {
  // delete action here
  this.dialogVisible = false;
  this.selectedRow = null;
}

这是Vue.js的基础知识。在 Element-UI 示例中，作者在事件中使用了内联代码。因为他们假装你已经知道了。您可以在 Vue.js documentation 阅读更多内容