VueJS Datatable: How do I get all the rows selected?

Question

I'm using TableLite for VueJS to display some records. I'm trying to retrieve all the records, I really only need the ID, that have been checked.

<template>
  <div ref="tableContainer" class="user-table">
    <TableLite
        :has-checkbox="true"
        :is-slot-mode="true"
        :is-loading="table.isLoading"
        :columns="table.columns"
        :rows="table.rows"
        :total="table.totalRecordCount"
        :sortable="table.sortable"
        :page-size="table.pageSize"
        :page-options="table.pageOptions"
        :messages="table.messages"
        :row-classes="table.rowClasses"
        @do-search="doSearch"
        @is-finished="updateUI"
        @return-checked-rows="updateCheckedRows"
        @row-clicked="rowClicked"
    >
    </TableLite>
  </div>
</template>

<script>
import TableLite from 'vue3-table-lite';

export default {
  name: 'CampaignTable',
  components: {TableLite},
  props: {
    url: {
      type: String,
      required: false,
      default: 'campaigns',
    },
  },
  data: function () {
    return {
      table: {
        columns:[
          {label: "Campaign Name ", field: "campaign_name", sortable: true, columnClasses: ['name']},
          {label: "Email Template", field: "template_name", sortable: true, columnClasses: ['next-call'],width: "15%"},
          {label: "Recipient Count", field: "recipient_count", sortable: true, columnClasses: ['email']},
          {label: "Emails Sent", field: "emails_sent", sortable: true, columnClasses: ['email']},
          {label: "Created At", field: "create_time", sortable: true, columnClasses: ['email']},
          {label: '', field: "action", sortable: false, columnClasses: ['action', 'text-center']},
        ],
        rows: [],
        sortable: {order: 'id', sort: this.order},
        totalRecordCount: 0,
        isLoading: true,
        pageSize: 100,
        rowClasses: (row) => {
          return ["campaign-id-"+row.id];
        },
        pageOptions: [
          {value: 100, text: 100},
          {value: 200, text: 200},
          {value: 300, text: 300},
          {value: 400, text: 400},
          {value: 500, text: 500},
        ],
        messages: {
          pageSizeChangeLabel: 'Show ',
          noDataAvailable: this.emptyMessage,
          gotoPageLabel: '',
          pagingInfo: 'Showing {0}-{1} of {2} entries'
        }
      },
      campaignIds : null,
    }
  },
  created() {
    this.doSearch();
  },

  methods: {
    updateCheckedRows (rowsKey)  {
      console.log(">>>>");
      console.log(rowsKey);
    },
    rowClicked(row){
      console.log("row is");
      console.log(row);
    }
  }
}
</script>

I'm seeing updateCheckedRows() execute and print but it's only printing the number of records that have been selected and not the records themselves. How can I get the records?

This is a sample record:

{
    "id": "01bed7e3a7",
    "campaign_name": "test 100",
    "template_id": 10009013,
    "template_name": "Test 1",
    "create_time": "2023-09-22T22:34:47+00:00",
    "emails_sent": 0,
    "recipient_count": 0
}

Answer 1

As this document say, you need set the column key:

columns: [
  {
    label: "",
    field: "id",
    sortable: false,
    isKey: true, 
  },
  ...

Check this template