为什么vuetable在使用__slot时没有注册<vuetable-field-slot:actions>

Question

我在我的项目中使用了vuetable-2。它工作得很好，直到我想在每一行的末尾添加动作按钮。它会显示以下错误：

<vuetable-field-slot:actions> - did you register the component correctly? 

​

​

我不知道怎么才能绕过这一关。

我的vuetable的字段如下所示：

data() {
    return {
        /* */
        fields: ['name', 'description', 'active',
            {
                name: '__slot:actions',
                title: 'Actions',
                titleClass: 'center aligned',
                dataClass: 'center aligned'
            }
        ]
    }
}

然后MyVuetable.vue插槽模板：

<vuetable ref="vuetable"
  /* */
>
  <template slot="actions" slot-scope="props">
    <div class="custom-actions">
      <button class="ui basic button"
        @click="onAction('view-item', props.rowData, props.rowIndex)">
        <i class="zoom icon"></i>
      </button>
      <button class="ui basic button"
        @click="onAction('edit-item', props.rowData, props.rowIndex)">
        <i class="edit icon"></i>
      </button>
      <button class="ui basic button"
        @click="onAction('delete-item', props.rowData, props.rowIndex)">
        <i class="delete icon"></i>
      </button>
    </div>
  </template>
</vuetable>

Answer 1

我相信相关文档在这里：

https://www.vuetable.com/guide/fields-definition.html#field-options

我不确定您从哪里获得了name: '__slot:actions'部件，但是文档指出，任何以__开头的字段名称都将被视为组件名称。

要使用插槽，您只需要name: 'actions'，并与模板中插槽的名称匹配即可。