选择vue-good-table Vue组件中的所有表行(不只是按页)

Question

我在一个Laravel项目中使用了一个名为vue-good-table (https://xaksis.github.io/vue-good-table/)的Vue组件。我只需要能够选择表中的所有记录，还需要使用组件提供的分页。该组件提供了此SelectAll功能，但问题是它只适用于每个页面。您可以选择实际页面的所有行，但不能选择整个表格中的所有行，如以下gif所示：

selectAll example

是否可以选择所有表行或使用selectAll按钮进行类似操作？

谢谢!

Answer 1

将@on-select-all="selectAll“添加到您的表中，使其如下所示：

<vue-good-table
    @on-select-all="selectAll"    
    :columns="columns"
    :rows="rows"
    :select-options="{ enabled: true }">
</vue-good-table>

并创建新方法

selectAll(){
      this.row.forEach(item=>{
        if(item.vgtSelected){
          this.$set(item,'vgtSelected', false);
        }else{
          this.$set(item,'vgtSelected', true);
        }
      },this);
    }

这应该可以解决你的问题