时间戳

首页 > 解决方案 > 如何处理 element-ui VueJS Dialog 组件中的打开事件？

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

问题描述

我在我的 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>

这是处理安装组件时运行的 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 组件实现相同的功能？

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

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

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.jsvuejs2bootstrap-4

解决方案

您可以在单击删除列中的按钮时分配选择项。

行模板：

<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文档中阅读更多内容

推荐阅读