Vue.js+Bootstrap的b-table操作列如何添加编辑删除按钮

你只需要利用b-table提供的列自定义插槽能力即可实现操作列按钮渲染，不需要额外引入第三方组件，具体修改步骤如下：

• 模板层：在b-table标签内添加action列对应的单元格具名插槽，插槽作用域可直接获取当前行的完整数据，用来绑定按钮的操作事件
• 配置层（可选）：将纯字符串格式的fields配置改为对象格式，自定义操作列的表头文字、关闭排序等不需要的功能
• 逻辑层：在组件methods中编写编辑、删除按钮对应的业务逻辑即可

完整修改代码 #

模板部分 #

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields">
      <!-- 自定义action列渲染内容 -->
      <template #cell(action)="scope">
        <b-button size="sm" variant="primary" class="me-2" @click="handleEdit(scope.item)">
          编辑
        </b-button>
        <b-button size="sm" variant="danger" @click="handleDelete(scope.item.id)">
          删除
        </b-button>
      </template>
    </b-table>
  </div>
</template>

代码说明：

• #cell(action)是v-slot:cell(action)的简写，是b-table预留的、专门用来自定义key=action列单元格内容的插槽
• 插槽返回的scope是当前行上下文对象，scope.item对应当前行的完整数据对象，可直接取id、name等字段传参给操作方法
• 按钮的尺寸、颜色、间距可通过Bootstrap内置的size、variant、间距类自行调整

脚本部分 #

<script>
export default {
  name:'DataTable',
  data() {
    return {
      // 优化字段配置，自定义每列的表头文字，操作列关闭排序
      fields: [
        { key: "id", label: "ID" },
        { key: "name", label: "用户名" },
        { key: "email", label: "邮箱" },
        { key: "phone", label: "联系电话" },
        { key: "action", label: "操作", sortable: false }
      ],
      items: [
        { id: 1, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "},
        { id: 2, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "},
        { id: 3, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "},
        { id: 4, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "},
        { id: 5, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "},
        { id: 6, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "},
        { id: 7, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "},
        { id: 8, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "},
        { id: 9, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "},
        { id: 10, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "}
      ]
    }
  },
  methods: {
    // 编辑按钮逻辑
    handleEdit(rowData) {
      console.log('当前编辑行数据：', rowData)
      // 此处编写弹出编辑表单、跳转编辑页的业务逻辑即可
    },
    // 删除按钮逻辑
    handleDelete(rowId) {
      console.log('待删除数据ID：', rowId)
      // 此处编写删除接口调用、删除后刷新列表的业务逻辑即可
    }
  }
}
</script>

兼容提示：如果你使用的BootstrapVue版本低于2.0.0，插槽语法不支持#简写，请将插槽部分替换为旧版写法：<template slot="cell(action)" slot-scope="scope">，其余逻辑不变。

内容的提问来源于stack exchange，提问作者Mery