在自定义渲染中单击单元格时，引导 vue 获取行数据答案

【问题标题】：bootstrap vue get row data when click on cell in custom rendering在自定义渲染中单击单元格时，引导 vue 获取行数据
【发布时间】：2020-03-11 17:00:12
【问题描述】：

我有一个表，其中有两个自定义字段索引和一个单独列中的垃圾桶图标，用于删除该行。我想在单击垃圾桶图标（在单元格上）中获取行以获取行索引，然后将其从数据对象中的项目中删除，但我的问题是我不知道如何在自定义渲染中的 onclick 事件中获取行数据。我该怎么做？？

<b-table :fields="fields" :items="items">
   <template v-slot:cell(index)="data">
      {{ data.index + 1 }}
   </template>
   <template v-slot:cell(remove)="data">
      <i class="fas fa-trash"></i>
   </template>
 </b-table>

这是我的数据：

 fields: [
       { key: 'index', label: 'index' },
       { key: 'cardNumber',label: 'card number'},
       { key: 'status',label: 'status'},
       { key: 'remove',label: 'remove'}
       ],
       items: [
                { cardNumber: '123456', status: 'accepted' ,_cellVariants: { status: 'accepted-card-number'},_showDetails: true},
                { cardNumber: '123456', status: 'pending' ,_cellVariants: { status: 'pending-card-number'},_showDetails: true},
                { cardNumber: '123456', status: 'unaccepted' ,_cellVariants: { status: 'unAccepted-card-number'},_showDetails: true},
      ],

【问题讨论】：

如何在第二个模板上添加一个带有@click 事件处理程序的按钮。在@click 事件上，根据需要传递事件名称和索引（即@click=yourEvent(data.index)

标签： vue.js bootstrap-vue

【解决方案1】：

这应该是您正在寻找的https://jsfiddle.net/q95otzbg/。您只需要在垃圾桶图标上添加一个单击功能，将其传递给该行的索引。

<div id="app">
  <div>
    <b-table :fields="fields" :items="items">
     <template v-slot:cell(index)="data">
        {{ data.index + 1 }}
     </template>
     <template v-slot:cell(remove)="data">
       <i class="fas fa-trash" @click=removeRow(data.index)></i>
     </template>
   </b-table>
  </div>
</div>

methods: {
 removeRow(index) {
    this.items.splice(index,1)
  }
}

【讨论】：