Vue-tables-2 使用复选框选择多行，然后将行推送到新数组

Question

使用 vue-tables-2 - 我用第一列复选框制作了一个原型，我的目标是：

1. 选择多行
2. 将此选择推送到新数组中
3. 为这个新的 tableData 数组创建一个 PDF

我能够创建复选框列，但是如何获取选定的行并将它们推送到一个新数组中，我可以从中生成 pdf？我有 selectRow 方法，但正在努力研究如何收集所有选定的行并将它们推送到新数组中。

        <v-server-table url="/removals" :data="tableData" :columns="columns" :options="options">

            <input slot="selected" slot-scope="props" type="checkbox" :checked="props.row.selected" @click="selectRow">

            <button slot="afterFilter" type="submit" @click="createPdf">Create PDF</button>


        </v-server-table>

Answer 1

将checkedRows 添加到您的数据对象中，如下所示：

data(){
   return{
   ...
   checkedRows:[]
  }
  }

通过添加v-model="checkedRows" :value="props.row"修改您的模板：

     <v-server-table url="/removals" :data="tableData" :columns="columns" :options="options">

        <input slot="selected" slot-scope="props" type="checkbox" :checked="props.row.selected" v-model="checkedRows" :value="props.row">

        <button slot="afterFilter" type="submit" @click="createPdf">Create PDF</button>


    </v-server-table>

所以在您的createPdf 方法中，您可以访问this.checkedRows

   methods:{
    ...
  createPdf(){
    //do whatever you want with your this.checkedRows
  }  
  ...
  }