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

Question

我想在表中添加操作列，并在其中添加删除和编辑按钮。图像中的表是下面编码的输出。为了执行操作，如编辑和删除，表中需要一个操作列。

表格

表的代码

<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元素(更多信息这里)。然后，您的表将有一个列，其中包含一个"action“描述，并为每一行设置一个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，并按在b-dropdown-item上实现的方式调用v-on:click="edit(data.item)"和v-on:click="remove(data.item)"。