0

我正在尝试使用 vue-good-table 中的复选框来选择行，然后在所选行操作中的按钮缓慢地对所选行执行功能。如何访问数据？

https://xaksis.github.io/vue-good-table/guide/advanced/checkbox-table.html#selected-row-action-slot

这不起作用：

<vue-good-table
                @on-selected-rows-change="selectAll"
                :columns="columns2"
                id="shift.id"
                :ref="shift.id"
                :rows="orderedPlacedUsers(shift)"
                 :select-options="{
                  enabled: true,
                  selectOnCheckboxOnly: true,
                }"
                >
                <div slot="selected-row-actions">
                  <button class="btn btn__small btn__flat" @click="lockAll(shift)">Lock All <i class="ml-2 fas fa-lock-alt"></i></button>
                </div>
                </div>
</vue-good-table>

然后

data() {
  return {
   columns2: [
    {
      label: '',
      field: 'extras',
      tdClass: 'text-center',
      sortable: false,
    },
    {
      label: 'Name',
      field: 'fullName',
    },
    {
      label: 'Signed Up',
      field: 'created',
      sortable: false,
    },
    {
      label: 'Job',
      field: 'requestedJob.title',
      tdClass: 'text-center',
    },
    {
      label: '',
      field: 'notes',
      sortable: false,
      tdClass: 'text-center',
    },
    {
      label: '',
      field: 'reservations',
      tdClass: 'text-center',
      tdClass: 'text-center',
      sortable: false,
    },
    
    {
      label: '',
      field: 'delete',
      tdClass: 'text-center',
      sortable: false,
    },
  ]
  }
}



methods: {
 lockAll(shift) {
   console.log(shift.id)
   console.log(this.$refs[shift.id].selectedRows)
 },
orderedPlacedUsers (shift) {
  function compare(a, b) {
    if (a.firstName < b.firstName)
      return -1;
    if (a.firstName > b.firstName)
      return 1;
    return 0;
  }
  return this.filteredPlacedUsers.sort(compare).filter(user => {
    return user.shift == shift.id && user.day == shift.day
  });
},
}

转变是“在 eventShifts 中的转变”......看起来像这样：{“day”：“2021-08-27”，“endTime”：null，“payrollComplete”：true，“startTime”：“14:00 ","event":"Los Bukis","id":"dvaBm5wQXMXvVCGBSK8e","exportedCont":{"seconds":1631208172,"nanoseconds":886000000},"collapse":false,"position":{"title ":null},"selectedStaff":null,"eventId":"CGHMVzcKPnNLsmRxoeVj","exportedEmp":{"seconds":1631208185,"nanoseconds":622000000},"name":"Line Cook","staff": “50”}

谢谢！

4

1 回答 1

0

要访问vue-good-tablevia，this.$refs您需要将:ref属性添加到vue-good-table.

<vue-good-table
   :id="shift.id"
   :ref="shift.id"
>
</vue-good-table>

但是还有一件事要考虑，这里说

当使用 v-for 用于元素/组件时，注册的引用将是一个包含 DOM 节点或组件实例的数组。

在您的情况下，可能vue-good-table用于带有v-for. 因此，您可以通过this.$refs[shift.id][0]. 最后，您可以打印selectedRows 使用console.log(this.$refs[shift.id][0].selectedRows)

于 2021-09-19T07:48:48.120 回答