vue-quasar之table

1.实现table表格的复选框，

代码如下

<tempalte>
  <div>
    <q-table
      title="已选兑换商品"
      :data="data"
      selection="multiple"   //1
      :selected.sync="selected"  //2    //div里面的1,2,3与script中的4主要是用于实现复选框
      :columns="columns"
      row-key="name"
    >
      <template v-slot:top-right>
        <q-btn
          color="primary"
          icon-right="archive"
          label="兑换"
          no-caps
          @click="checkItems"
        />
      </template>
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td width="52">
            <q-checkbox dense v-model="props.selected" color="orange-12" />    // 3.主体部分
          </q-td>
          <q-td key="name" :props="props">
            {{ props.row.name }}
          </q-td>
          <q-td key="calories" :props="props">
            {{ props.row.calories }}
            <q-popup-edit v-model="props.row.calories" title="数量" buttons>
              <q-input type="number" v-model="props.row.calories" dense autofocus />
            // 此处可以点击输入
            </q-popup-edit>
          </q-td>
          <q-td key="fat" :props="props">
            <q-badge color="purple">
              {{ props.row.fat }}
            </q-badge>
          </q-td>
       </q-tr>
    </template>
  </div>
</template>
<script>
  export default {
    data () {
      return {
      selected: [],   //4
      columns: [
        {
          name: 'name',
          required: true,
          label: '商品',
          align: 'left',
          field: row => row.name,
          format: val => `${val}`,
          sortable: true
        },
        { name: 'calories', align: 'center', label: '数量', field: 'calories', sortable: true },
        { name: 'fat', label: '积分', field: 'fat', sortable: true }
      ],

      data: [
        {
          name: '垃圾袋',
          calories: 159,
          fat: 6.0
        },
        {
          name: '手抽纸',
          calories: 237,
          fat: 9.0
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0
        },
        {
          name: '垃圾桶',
          calories: 375,
          fat: 0.0
        },
        {
          name: '牙刷',
          calories: 392,
          fat: 0.2
        },
        {
          name: '吹风机',
          calories: 408,
          fat: 3.2
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0
        },
        {
          checkbox: '',
          name: 'KitKat',
          calories: 518,
          fat: 26.0
        }
      ]
   }
  },
  methods: {
    checkItems() {}
  }
}
</script>