javascriptvue.jsvuejs2vue-componentvue-tables-2

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


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

  1. Select multiple rows
  2. Push this selection into a new array
  3. 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>


Solution

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