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

Question

Using vue-tables-2 - I made a prototype with the first column checkboxes and my goal is to:

Select multiple rows
Push this selection into a new array
Create a PDF of this new array of tableData

I was able to create the column of checkboxes, but how can I take the selected rows and push them into a new array in which I can generate a pdf from? I have the method selectRow but am struggling on how to gather all the selected rows and push them into a new array.

        <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>

Boussadjra Brahim · Accepted Answer · 2018-10-01 14:38:40Z

1

add checkedRows to your data object as follow :

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

modify your template to this by adding 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>

so in your createPdf method you are having access to this.checkedRows

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

answered Oct 1, 2018 at 14:38

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related