javascript - 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
  }  
  ...
  }