如何使用 el-table (Element UI?

Question

我目前正在使用 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 表创建的表中也有一个用户名列。 如何修改上面的 html 代码以便在按下删除按钮时访问行中的名称？

任何帮助将不胜感激。我被困在这个问题上很长一段时间了。

谢谢

Answer 1

当绑定到点击事件时，您可以将当前行作为参数传递给您的函数，然后访问您的数据属性。

<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);
    }
  }

Working Example