首页 文章

如何处理element-ui VueJS的Dialog组件中的open事件？

提问于
浏览 次
0

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

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

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

这是jQuery来处理在安装组件时运行的Modal：

mounted（）{

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

对话框组件定义了诸如open之类的事件，但没有文档如何使用它们 . 所以我很无能为力 .

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 回答

  • 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

    回复于

相关问题