bootstrap vue在自定义渲染中点击单元格获取行数据

Question

我有一个 table，在单独的列中有两个自定义字段索引和一个垃圾桶图标，用于删除该行。我想在垃圾桶图标（单元格上）上单击以获取行的索引，然后将其从数据对象中的项目中删除，但我的问题是我不知道如何在自定义渲染的 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},
      ],

Answer 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)
  }
}

bootstrap vue在自定义渲染中点击单元格获取行数据

bootstrap vue get row data when click on cell in custom rendering

vue.js

bootstrap-vue