如何在vue-good-table-next中创建自定义编辑删除操作按钮

代码无法渲染自定义按钮的核心原因有2个：

• 用了Vue2的旧版插槽语法，Vue3 + vue-good-table-next 已经不支持slot、slot-scope的属性式插槽写法
• 插槽名使用错误，不需要重写整个table-row插槽手动判断列字段，组件本身提供了按列匹配的具名插槽，写法更简洁也不会破坏默认渲染逻辑

直接使用组件提供的列级具名插槽，绑定按钮事件时传入当前行数据即可，完整修正后的代码如下：

<template>
  <div>
    <vue-good-table :columns="columns" :rows="fisios" :search-options="{enabled: true}">
      <!-- 直接对应field为actions的列写自定义插槽，插槽名格式为 table-column-{字段名} -->
      <template #table-column-actions="props">
        <button class="btn btn-warning me-2" @click="edit(props.row)">Edit</button>
        <button class="btn btn-danger" @click="remove(props.row)">Delete</button>
      </template>
    </vue-good-table>
  </div>
</template>

<script>
export default {
  created: function () {
    axios.get('/fisios/getFisios').then(({data}) => this.fisios = data);
  },
  methods: {
    edit(row) {
      // 此处可通过row拿到当前行所有字段，比如row.id获取条目主键，编写对应编辑逻辑
      console.log('编辑条目', row);
    },
    remove(row) {
      // 此处编写删除逻辑
      console.log('删除条目', row);
    },
  },
  data(){
    return {
      searchTerm: '',
      fisios: [],
      columns: [
        {
          label: 'Name',
          field: 'nombre',
        },
        {
          label: 'Surname',
          field: 'apellidos',
        },
        {
          label: 'tlf1',
          field: 'tlf1',
        },
        {
          label: 'tlf2',
          field: 'tlf2',
        },
        {
          label: 'Actions',
          field: 'actions',
          sortable: false,
        },
      ],
    };
  },
};
</script>

• 插槽内的props.row是当前行的完整原始数据，props.formattedRow是格式化后的数据，根据业务需求取用即可
• 这种列级插槽写法不需要手动判断当前渲染列，其他列会沿用组件默认的渲染、排序、搜索逻辑，不会出现功能异常
• 如果确实需要自定义整行渲染，Vue3下正确的写法是<template #table-row="props">，不能再使用旧版的slot属性写法

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