Vue Good Table 如何访问 Selected Row Actions 中的数据答案

【问题标题】：Vue Good Table how to access data in Selected Row ActionsVue Good Table 如何访问 Selected Row Actions 中的数据
【发布时间】：2021-11-13 07:31:13
【问题描述】：

我正在尝试使用 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"}

谢谢！

【问题讨论】：

标签： vue.js vue-good-table

【解决方案1】：

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

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

但还有一点需要考虑，上面写着here

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

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

【讨论】：

感谢您的帮助。我已经更新了代码以包含参考。我为这条线 console.log(this.$refs[shift.id].selectedRows) 得到“未定义”
可以分享shift和columns2的内容吗。另外，你能分享selectAll和orderedPlacedUsers的方法吗？
这是您要求的代码。谢谢！
@GregFielding，我已经编辑了答案。请看一下。我认为console.log(this.$refs[shift.id][0].selectedRows) 会起作用。