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

Question

I am currently working on building an app in Vue.js using Element-UI and I am fairly new to using Element-UI. I have created a table using el-table. I have managed to add contents in the table. Now, I have a delete button in each row of the table. After I click the delete button, it should delete the row successfully (ie, make a DELETE axios or http request to the server and delete that user from the database). In order to do that, I need to access the contents or just the username in that specific row. How do I do this?

Find my HTML (Delete) code below:

HTML part of 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>

There is a column for username as well in the table created using the el-table. How do I modify the above html code in order to access the name in the row when pressed on the delete button?

Any help would really be appreciated. I am stuck on this for quite sometime.

Thank you

Raja · Accepted Answer · 2020-07-17 08:14:24Z

2

When binding to the click event, you can pass the current row as an argument to your function and then access your data property.

<el-button
    size="mini"
    type="danger" 
    icon="el-icon-delete" circle
    @click="deleteUser(scope.row)"
>
</el-button>

Then in your function,

methods: {
    deleteUser(row) {
      let username = row.username; // Assuming your object has a username property 
      console.log('Deleting user ' + username);
    }
  }

Working Example

answered Jul 17, 2020 at 8:14

Raja

4373 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

skate_23 Over a year ago

Thank you. This worked really well. Appreciate it. :)

Raja Over a year ago

You're welcome. Please mark the question as solved.

skate_23 Over a year ago

I have another issue, I want to display a dialog box instead of an alert when pressed on the delete button. The Dialog box displays a message "Deleting user <username>" and then after clicking on the "Confrim" button on the dialog box, it should delete that user. So when I try doing that with calling the function delete_user(scope.row) after clicking the "Confrim" button, then it deletes the username from the last row in the table and not the one in the row that was meant to be deleted. It takes the username from the last row. Please could help in this? I would really appreciate it.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related