Question

我的所有网页都是在Page-Component.vue下创建的，我正在尝试使用vue-data-tables

main.js

var Vue = require('vue')
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import DataTables from 'vue-data-tables'

Vue.use(Vuex)
Vue.use(VueRouter)
Vue.use(DataTables)
import App from './App.vue'
import PageContent from './components/PageContent.vue'
import MyPage from './components/MyPage.vue'

let router = new VueRouter({
    // router config
}

var dataTables = DataTables.default;
Vue.component('page-content', PageContent);

let MyApp = Vue.component('app', App);
MyApp = new MyApp({
    el: '#app',
    router,
    store
})

MyPage.vue

<template>
  <page-content page-title="Supervisor Review">
    <div class="main-content">

     <data-tables 
               :data='this.pending_shots'
               >
        <el-table-column prop="shot_id" label="ID" sortable="custom">
        </el-table-column>
        <el-table-column prop="shot_name" label="Shot" sortable="custom">
        </el-table-column>
        <el-table-column prop="shot_description" label="Description" sortable="custom">
        </el-table-column>
      </data-tables>

    </div>
  </page-content>
</template>
<style src="semantic-ui-css/semantic.min.css" media="screen" title="no title" charset="utf-8" />


<script>
import Vue from 'vue'

export default {
    data () {
        return {
            pending_shots: [],
        }
    },
    created: function() {
        Vue.axios.get(
          'http://server:1234/path/to/api', {
          headers: {
            'Authorization': 'Bearer ' + localStorage.getItem('access_token')
          }
        })
        .then(response => {
          this.pending_shots = JSON.stringify(response.data)
        })
        .catch((error) => {
          this.pending_shots = error
        })
    }
  }
}
</script>

错误

19:32:08.263 [Vue warn]: Unknown custom element: <el-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <DataTables>
       <PageContent> at src/components/PageContent.vue
         <SupervisorReview> at src/components/SupervisorReview.vue
           <Root> 1 6:485:7
    warn webpack-internal:///6:485:7
    createElm webpack-internal:///6:5099:11
    createChildren webpack-internal:///6:5209:9
    createElm webpack-internal:///6:5114:9
    ...
        ...



19:32:08.265 [Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <DataTables>
       <PageContent> at src/components/PageContent.vue
         <SupervisorReview> at src/components/SupervisorReview.vue
           <Root> 1 6:485:7
    warn webpack-internal:///6:485:7
    createElm webpack-internal:///6:5099:11
    createChildren webpack-internal:///6:5209:9
    createElm webpack-internal:///6:5114:9
        ...
        ...

Answer 1

来自文档：

This lib depends on the following element-ui components:

el-table
el-table-column
el-row
el-col
el-input
el-button
el-pagination
el-checkbox
el-checkbox-group

所以你需要导入ElementUI：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import DataTables from 'vue-data-tables'

Vue.use(ElementUI)
Vue.use(DataTables)

Vue：将子组件添加到组件中

错误

1 个答案: