如何添加带有“编辑”和“删除”按钮的操作列？

Question

我想在表格中添加操作列，其中包含删除和编辑按钮。图像中的表格是下面编码的输出。表中需要一个操作列来执行操作，即编辑和删除。

Table

表格代码

<b-table
      responsive
      class="mb-0"
      head-variant="light"
      :items="items"
      :current-page="currentPage"
      :per-page="perPage"
    >
      <template #cell(id)="data"> #{{ data.item.id }} </template>
      <template #cell(user)="data">
        <b-img
          :src="require('@/assets/images/users/' + data.item.user.image)"
          rounded="circle"
          :alt="data.item.user.image"
          width="40"
        />
        <span class="ml-2 fw-medium"
          >{{ data.item.user.first }} {{ data.item.user.last }}</span
        >
      </template>
      <template #cell(team)="data">
        <b-img
          :src="require('@/assets/images/users/' + data.item.team.teamimg1)"
          rounded="circle"
          :alt="data.item.team.teamimg1"
          width="35"
          class="mr-n2 border border-white"
        />
        <b-img
          :src="require('@/assets/images/users/' + data.item.team.teamimg2)"
          rounded="circle"
          :alt="data.item.team.teamimg2"
          width="35"
          class="mr-n2 border border-white card-hover"
        />
        <b-img
          :src="require('@/assets/images/users/' + data.item.team.teamimg3)"
          rounded="circle"
          :alt="data.item.team.teamimg3"
          width="35"
          class="border border-white"
        />
      </template>
      <template #cell(status)="data">
        <b-badge
          pill
          :class="`px-2 text-white badge bg-${data.item.status.statusbg}`"
        >
          <i class="font-9 mdi mdi-checkbox-blank-circle"></i>
          {{ data.item.status.statustype }}
        </b-badge>
      </template>
      <template #cell(action)="data">
        <b-button variant="light" @click="deleteUser(data.item.user.id)">
          <feather type="delete" class="feather-sm"></feather>
        </b-button>
      </template>
      
    </b-table>

Answer 1

我建议您使用b-dropdown 元素（更多信息here）。然后，您的表格将有一列带有“操作”描述，并且每一行都有一个 b 下拉按钮：

<b-table
  responsive
  class="mb-0"
  head-variant="light"
  :items="items"
  :current-page="currentPage"
  :per-page="perPage"
>
  <template #cell(id)="data"> #{{ data.item.id }} </template>
  
  <!--......-->

  <template #cell(action)="data">
    
      <b-dropdown
          right
          variant="primary"
      >
          <template v-slot:button-content>
            Select One
          </template>

          <b-dropdown-item v-on:click="edit(data.item)">
            Edit
          </b-dropdown-item>

          <b-dropdown-item v-on:click="delete(data.item)">
            Delete
          </b-dropdown-item>
          
      </b-dropdown>

  </template>
  
</b-table>

然后，在您的methods 中添加：

edit: function(myObject) {
    console.log(myObject);
    //Do something here
},

delete: function(myObject) {
    console.log(myObject);
    //Do something here
},

您还可以为每个编辑和删除功能添加一列。在这种情况下，只需创建一个普通的b-button 并调用v-on:click="edit(data.item)" 和v-on:click="remove(data.item)"，就像在b-dropdown-items 上实现的一样