Vue新手求助：如何在Vue Good Table中获取选中行数据

嘿，作为Vue新手碰到这个问题太正常啦！我来一步步教你怎么搞定在vue-good-table里获取选中行数据的事儿～

步骤1：准备存储选中行的变量 #

首先在你的组件data里，声明一个数组用来保存所有选中的行数据：

export default {
  data() {
    return {
      columns1: [...], // 你的列配置
      rows1: [...], // 表格的数据源
      selectedRows: [] // 专门用来存选中的行
    };
  },
  // ...其他代码
};

步骤2：修改自定义checkbox的绑定逻辑 #

你代码里已经用了table-row-after插槽自定义了带checkbox的列，现在只需要调整checkbox的绑定，让它和我们的selectedRows关联起来：

<div class="table-responsive-sm">
  <vue-good-table 
    title="Page List" 
    :columns="columns1" 
    :rows="rows1" 
    :paginationOptions="{enabled: false}"
  >
    <template slot="table-row-after" slot-scope="props">
      <td class="fancy">
        <input 
          type="checkbox" 
          :value="props.row" <!-- 把当前行数据作为checkbox的值 -->
          v-model="selectedRows" <!-- 绑定到存储选中行的数组 -->
        >
      </td>
    </template>
  </vue-good-table>
</div>

步骤3：使用选中的行数据 #

现在你可以随时通过this.selectedRows获取所有选中的行啦！比如加个按钮来测试：

<button @click="handleSubmit">提交选中数据</button>

对应的方法：

methods: {
  handleSubmit() {
    if (this.selectedRows.length === 0) {
      alert("还没选中任何行哦～");
      return;
    }
    // 这里可以处理选中的数据，比如打印看看或者发送请求
    console.log("选中的行数据：", this.selectedRows);
  }
}

额外小技巧（可选） #

如果你需要在选中/取消选中时做一些额外操作，可以给checkbox加个@change事件：

<input 
  type="checkbox" 
  :value="props.row" 
  v-model="selectedRows"
  @change="onRowSelectChange(props.row)"
>

然后实现这个方法：

methods: {
  onRowSelectChange(row) {
    // 判断当前行是否被选中
    const isSelected = this.selectedRows.includes(row);
    console.log(`${isSelected ? "选中了" : "取消选中了"}行：`, row);
  }
}

这样就完美解决获取选中行数据的需求啦！

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