html - 如何使用 el-table (Element UI?
问题描述
我目前正在使用 Element-UI 在 Vue.js 中构建一个应用程序,而且我对使用 Element-UI 还是很陌生。我已经使用 el-table 创建了一个表。我设法在表格中添加了内容。现在,我在表格的每一行都有一个删除按钮。单击删除按钮后,它应该成功删除该行(即,向服务器发出 DELETE axios 或 http 请求并从数据库中删除该用户)。为此,我需要访问该特定行中的内容或用户名。我该怎么做呢?
在下面找到我的 HTML(删除)代码:
Vue.js 的 HTML 部分:
<el-table>
<el-table-column
width="75"
prop="name">
<template slot-scope="scope">
<!--Adding the delete button -->
<el-button
size="mini"
type="danger"
icon="el-icon-delete" circle
@click="users_delete_visible = true"
>
</el-button>
</template>
</el-table-column>
</el-table>
在使用 el-table 创建的表中还有一个用户名列。如何修改上面的 html 代码以便在按下删除按钮时访问行中的名称?
任何帮助将不胜感激。我被困在这个问题上很长一段时间了。
谢谢
解决方案
绑定到单击事件时,您可以将当前行作为参数传递给您的函数,然后访问您的数据属性。
<el-button
size="mini"
type="danger"
icon="el-icon-delete" circle
@click="deleteUser(scope.row)"
>
</el-button>
然后在你的函数中,
methods: {
deleteUser(row) {
let username = row.username; // Assuming your object has a username property
console.log('Deleting user ' + username);
}
}