如何处理element-ui VueJS的对话框组件中的打开事件？
如何处理element-ui VueJS的对话框组件中的打开事件？
提问于 2018-08-05 22:35:29
在我的VueJS项目中，我有使用Boostrap4的工作代码。我在一个表中显示了一个用户列表，并且每一行都有“Delete”链接。每个用户在行中都有电子邮件。单击Delete时，BS 4 Modal将在Modal的正文中显示用户的电子邮件。Modal有按钮，Cancel和Yes。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
对话组件定义了像open这样的事件，但没有文档说明如何使用它们。所以我一无所知。
元素-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>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-06 01:31:27
您可以在删除列中单击按钮时分配选择项。
行模板：
<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上阅读更多内容
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51695259
复制相关文章
相似问题