Vue.js 如何从我的vueJS表中创建可重用组件？

我是vueJS新手，我想让我的数据表成为可重用的。我希望动态呈现表，例如添加列名。我不知道怎么开始。我想把数据列放到我的道具里，这样我可以在刀锋上调用它。对吗

LogsTable.vue

<template>
    <table id="user_log_list" class="table table-stripped table-bordered table-wordbreak">
    </table>
</template>

<script>
    export default {
        name: 'tableLogs',
        props: ['logs'],
        data() {
            return {
                columns: [{
                    title: 'Date'
                }, {
                    title: 'User'
                }, {
                    title: 'Role'
                }, {
                    title: 'Description'
                }],
                rows: [],
                dt_handle: null
            }
        },
        methods: {
            formatDate: function(local_created_at) {
                let date = new Date(local_created_at);
                let day = date.getDate();
                let month = date.getMonth() + 1; 
                let year = date.getFullYear();
                let hours = date.getHours();
                let minutes = date.getMinutes();
                let meridian = hours >= 12 ? 'PM' : 'AM';

                hours = hours % 12;
                hours = hours ? hours : 12; 
                minutes = minutes < 10 ? '0'+minutes : minutes;

                let time = hours + ':' + minutes + ' ' + meridian;

                if (day < 10) {
                  day = '0' + day;
                } 
                else if (month < 10) {
                  month = '0' + month;
                } 

                return date = day + '/' + month + '/' + year + ' ' + time;
            }
        },
        watch: {
            logs(value) {
                let table = this;
                table.rows = [];

                value.forEach(function(item) {                 
                    let row = [];                   

                    if(item.get_user) {
                        let role = item.get_user.user_type;
                        row.push(table.formatDate(item.local_created_at));
                        row.push(item.get_user.full_name);
                        row.push((role.charAt(0).toUpperCase() + role.slice(1)).replace('_', ' '));
                        row.push(item.description);
                    }

                    table.rows.push(row);
                });

                table.dt_handle.clear();
                table.dt_handle.rows.add(table.rows);
                table.dt_handle.draw();
            }
        },
        mounted() {
            $.fn.dataTable.ext.errMode = 'none';
            $(this.$el).on('error.dt', function(e, settings, techNote, message) {
               console.log( 'An error has been reported by DataTables: ', message);
            })
            let table = this;    
            table.dt_handle = $(this.$el).DataTable({
                columns: table.columns,
                data: table.rows,
                searching: true,
                paging: true,
                info: true
            });
        }
    }
</script>

logs.blade.php

@extends('admin_main') 

@section('title') 
User Activity 
@endsection 

@section('body')
<h2>User Activity</h2>
<div id="table-logs">
    <data-table :logs="showLogs"></data-table>
</div>
@endsection 

@section('scripts') 
{!! HTML::script('js/core/dataTables.bootstrap.js') !!} 
{!! HTML::script('js/admin/logs.js') !!}
@endsection

@extends（'admin_main'））
@章节（“标题”）
用户活动
@端部
@第节（“正文”）
用户活动
@端部
@节（“脚本”）
{！！HTML:：script（'js/core/dataTables.bootstrap.js'）
{！！HTML:：script（'js/admin/logs.js'）
@端部

应该有更好的方法来编写您在

手表中所写的内容

。如果您可以设置一个codesandbox链接，那将非常有用。此外，实例化datatable的方式看起来非常类似于jquery。您可以使用

vue datatable

或自己构建表。无耻的插件，我已经将其包装为一个组件-

@extends('admin_main') 

@section('title') 
User Activity 
@endsection 

@section('body')
<h2>User Activity</h2>
<div id="table-logs">
    <data-table :logs="showLogs"></data-table>
</div>
@endsection 

@section('scripts') 
{!! HTML::script('js/core/dataTables.bootstrap.js') !!} 
{!! HTML::script('js/admin/logs.js') !!}
@endsection