如何处理 element-ui VueJS Dialog 组件中的打开事件？答案

【问题标题】：How to handle open event in Dialog component of element-ui VueJS?如何处理 element-ui VueJS Dialog 组件中的打开事件？
【发布时间】：2019-01-12 16:23:49
【问题描述】：

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

这是表格行中调用Modal的代码：

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

这是处理组件挂载时运行的模态的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>

【问题讨论】：

标签： vue.js vuejs2 bootstrap-4

【解决方案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 阅读更多内容

【讨论】：