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

Posted 2023-02-23

【中文标题】Vue Good Table 如何访问 Selected Row Actions 中的数据

【英文标题】：Vue Good Table how to access data in 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"

谢谢！

【参考方案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) 会起作用。