add checkbox to header about vue-tables-2 HOT 15 CLOSED

<template slot="h__check">
     <input type='checkbox' id='checkbox' @click='selectAllAtOnce()'>
</template>

         <v-client-table ref="myGrid" :data="tableData" :columns="myColumns">
            <template slot="selected" scope="props">
              <div>
                <input v-model="props.row.selected" type="checkbox">
              </div>
            </template>
          </v-client-table>

          headings: {
            selected: function (h) {
              return h('input', {
                attrs: {
                  type: 'checkbox',
                  id: 'selectAllCheckbox'
                },
                on: {
                  click: (e) => {
                    this.selectAll(e.srcElement.checked)
                  }
                },
                ref: 'selectAllCheckbox'
              })
            },

      selectAll(checked) {
        let length = tableData.length
        for (let i = 0; i < length; i++) {
          if (checked) {
            tableData[i].selected = true
          } else {
            tableData[i].selected = false
          }
        }
      },

              <template
                  v-for="column in columns"
                  :slot="`h__${column}`"
                >
                  <div
                    :key="column"
                    v-html="options.headings[column]"
                    @click="clickhandler($event,column)"
                  />
                </template>

<v-client-table :columns="['name', 'select']" :data="products" :options="table.options" :theme="table.theme" class="dataTable p-0 m-0 w-100">
      <div slot="h__select" style="float: right">
            <b-checkbox @change="cart.selectedProducts = selectAll()" color="success" style="float: right"
                                          v-model="allSelected"/>
      </div>
      <div slot="select" slot-scope="props" style="float: right">
            <b-form-checkbox v-model="cart.selectedProducts" :value="props.row._id" color="success"
                                          style="float: right" />
      </div>
</v-client-table>

data: () => {
      return {
            products: {
                  {name: "socks", _id: 1},
                  {name: "shirt", _id: 2},
                  {name: "pants", _id: 3},
            },
            cart:  {
                  selectedProducts: [],
                  ...  // Other cart Data
            },
            allSelected: false,
            ...  // Other Page Data
      }
}

watch: {
      selectedProducts: {
            deep: true,
            handler() {
                  let all = this.products.filter(product => {
                        return this.cart.selectedProducts.includes(product._id);
                  }
                  if (all.length === this.products.length) {
                       console.log("change to true")
                        this.allSelected = true;
                  } else {
                       console.log("change to false")
                        this.allSelected = false;
                  }
            }
      }
}

methods: {
      selectAll() {
                  let result = [];
                  let all = this.products.filter(product => {
                        return this.cart.selectedProducts.includes(product._id);
                  }
                  if (all.length === this.products.length) {
                        return result;
                  } else {
                        this.products.forEach(function (product, index) {
                              Vue.set(result, index, product);
                        })
                        return result;
                  }
      }
}