Multi-selects

<template lang="pug">
  .test-slat-table
    NioSlatTable(
      v-if="columns && items"
      :items="items"
      :columns="columns"
      multi-select
      :defaultSelection="[1, 3]"
      @selectionChanged="handleSelectionChanged($event)"
    )
</template>

<script>

import { testItems } from './mocks/slatTableItems'

export default {
  data: () => ({
    columns: null,
    items: testItems
  }),
  methods: {  
    computeOrderNumber(item) {
      return `#${item.orderNumber}`
    },
    computeSpentBudget(item) {
      return `$${item.spent}/$${item.budget}`
    },
    handleSelectionChanged(selection) {
      console.log(`Selection changed. Current selection =`)
      console.log(selection)
    },
    makeColumns() {
      this.columns = [
        {
          name: "slat",
          props: {
            image: "imageSrc",
            title: "orderName",
            subtitle: this.computeOrderNumber
          }
        },
        {
          name: "spentBudget",
          label: "Spent/Budget",
          computed: this.computeSpentBudget
        }
      ]  
    }
  },
  mounted() {
    this.makeColumns()
  }
};
</script>