如何使用 el-table（元素 UI？

Question

我目前正在使用 Element-UI 在 Vue.js 中构建一个应用程序，我对使用 Element-UI 还很陌生。我使用 el-table 创建了一个 table。我已设法在 table 中添加内容。现在，我在 table 的每一行中都有一个删除按钮。单击删除按钮后，它应该会成功删除该行（即，向服务器发出 DELETE axios 或 http 请求并从数据库中删除该用户）。为此，我需要访问该特定行中的内容或用户名。我该怎么做？

在下面找到我的 HTML（删除）代码：

HTML 部分 Vue.js:

      <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 创建的 table 中也有一列用户名。我如何修改上面的 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

如何使用 el-table（元素 UI？

How do I acces the values in a specific row in a table in Vue.js using el-table (Element UI?

html

vue.js

html-table

vuejs2

element-ui