Vue-tables-2 Select 带复选框的多行然后将行推送到新数组

Question

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

Select 多行
将此选择推入一个新数组
为这个新的 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
  }  
  ...
  }

Vue-tables-2 Select 带复选框的多行然后将行推送到新数组

Vue-tables-2 Select Multiple Rows with checkboxes then push rows to a new array

javascript

vue.js

vue-component

vuejs2

vue-tables-2