如何在Vue的vue-good-table中添加编辑按钮？

Hey there! I noticed you're new to Vue and trying to add an edit button to your vue-good-table—let's fix that up for you right away. Your current code is on the right track with the table-row slot, but there are a couple small adjustments needed to get the edit button working properly.

First, let's update your template to correctly add the edit button and pass the row's data when it's clicked:

<div class="table-responsive-sm">
  <vue-good-table 
    title="Shop List Table" 
    :columns="columns" 
    :rows="rows" 
    :paginate="true" 
    :lineNumbers="true" 
    :globalSearch="true"
  >
    <template slot="table-row" slot-scope="props">
      <!-- Switch to a button element for semantic action, fix the click handler -->
      <button class="btn btn-sm btn-primary" @click="onEditRow(props.row)">Edit</button>
    </template>
  </vue-good-table>
</div>

Key changes I made: #

• Swapped the <a> tag for a <button>—this is more semantic since it's an action, not a link to another page.
• Fixed the click event from @on-row-click to @click (the standard Vue click directive).
• Passed props.row to the onEditRow method so you have full access to the specific row's data when the button is clicked.

Next, add the corresponding method in your script section to handle the edit action. Here's an example implementation:

export default {
  data() {
    return {
      columns: [
        // Your existing column definitions go here
        { label: 'Shop Name', field: 'shopName' },
        { label: 'Address', field: 'address' },
        // ... add other columns as needed
      ],
      rows: [
        // Your shop data rows go here
        { id: 1, shopName: 'Downtown Grocers', address: '123 Main St' },
        { id: 2, shopName: 'Uptown Bakery', address: '456 Oak Ave' },
      ]
    };
  },
  methods: {
    onEditRow(row) {
      // This is where you'll implement your edit logic
      console.log('Editing shop:', row);
      // Example actions you could take here:
      // 1. Open a modal pre-filled with the row's data
      // 2. Navigate to an edit page with the row's ID
      // 3. Set a data property to mark this row as "editable" in the table
    }
  }
};

A quick extra tip: If you want to add multiple action buttons (like Edit and Delete), just add more button elements inside the table-row slot—they'll appear in every row alongside your other column data.

内容的提问来源于stack exchange，提问作者user8411743