Laravel+Vue项目使用vuejs-datatable提示未知自定义元素求助

DevOps 小满

2026-9-28

错误原因

你对vuejs-datatable的组件注册方式完全错误，VuejsDatatableFactory是工厂对象，不能直接放入组件的components选项中使用，必须先调用对应注册方法，才能生成<datatable>和<datatable-pager>两个可识别的组件。

解决方法

提供两种可选方案，按需选择即可：

方案1：全局注册（推荐，多页面使用datatable时更方便）

找到项目的Vue入口文件（通常为src/main.js），添加如下代码：

import Vue from 'vue'
import { VuejsDatatableFactory } from 'vuejs-datatable'
// 导入组件样式
import 'vuejs-datatable/dist/vuejs-datatable.css'

// 全局注册datatable相关组件
Vue.use(VuejsDatatableFactory)

注册完成后所有页面都可以直接使用<datatable>和<datatable-pager>标签，无需再单独在组件内导入注册。

方案2：局部注册（仅在Note.vue页面使用时选择）

直接修改Note.vue的script代码，替换原有导入和注册逻辑即可：

// 替换原有的工厂导入，直接导入两个组件
import { Datatable, DatatablePager } from 'vuejs-datatable'
// 导入样式
import 'vuejs-datatable/dist/vuejs-datatable.css'

export default {
  // 替换原有的components注册内容
  components: {
    Datatable,
    DatatablePager
  },
  // 原有其他代码保持不变
  mounted() {
    console.log('Component mounted.')
  },
  // ...剩下的data、methods、created等逻辑完全不用改
}