Add vue-datasource

package.json

@@ -11,10 +11,10 @@
   "dependencies": {
     "element-ui": "^1.1.6",
     "vue": "^2.1.10",
+    "vue-datasource": "^1.0.4",
     "vue-markdown": "^2.1.3",
     "vue-quill-editor": "^1.1.1",
-    "vue-router": "^2.2.0",
-    "vue-tables-2": "^0.4.33"
+    "vue-router": "^2.2.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",

src/components/common/sidebar.vue

@@ -4,7 +4,7 @@
             <el-submenu index="1">
                 <template slot="title"><i class="el-icon-menu"></i>表格</template>
                 <el-menu-item index="basetable">基础表格</el-menu-item>
-                <el-menu-item index="vuetable">Datatable</el-menu-item>
+                <el-menu-item index="vuetable">Vue表格组件</el-menu-item>
             </el-submenu>
             <el-submenu index="2">
                 <template slot="title"><i class="el-icon-date"></i>表单</template>

src/components/page/VueEditor.vue

@@ -20,7 +20,7 @@
     export default {
         data: function(){
             return {
-                content: '<p>编辑器...</p>',
+                content: '<p>Hello BBK</p>',
                 editorOption: {
                     // something config
                 }

src/components/page/VueTable.vue

@@ -3,19 +3,110 @@
         <div class="crumbs">
             <el-breadcrumb separator="/">
                 <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
-                <el-breadcrumb-item>基础表格</el-breadcrumb-item>
+                <el-breadcrumb-item>Vue表格组件</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
+        <div class="plugins-tips">
+            vue-datasource：一个用于动态创建表格的vue.js服务端组件。
+            访问地址：<a href="https://github.com/coderdiaz/vue-datasource" target="_blank">vue-datasource</a>
+        </div>
+        <datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination"
+                :actions="actions"
+                v-on:change="changePage"
+                v-on:searching="onSearch"></datasource>
     </div>
 </template>
 
 <script>
+    import Datasource from 'vue-datasource';
     export default {
         data: function(){
             return {
+                information: {
+                    pagination: {
+                        total: 25, // Number of total rows (default 0)
+                        per_page: 15, // Number of rows to show (default 15)
+                        current_page: 1, // Actual page
+                        last_page: 2, // Last page
+                        from: 1, // Beginning of visible rows
+                        to: 15 // End of visible rows
+                    },
+                    data: [{
+                        "id": 1,
+                        "name": "Jaylen Schmidt",
+                        "email": "aheaney@example.org",
+                        "city": "Conroyburgh",
+                        "company": "Kunde, Gerhold and Runte"
+                        },
+                        {
+                            "id": 2,
+                            "name": "Ms. Desiree Franecki III",
+                            "email": "pweissnat@example.net",
+                            "city": "New Mathew",
+                            "company": "Davis Ltd"
+                        },
+                        {
+                            "id": 3,
+                            "name": "Clyde Corwin",
+                            "email": "rolfson.lexus@example.com",
+                            "city": "East Ron",
+                            "company": "Zieme and Sons"
+                        }]
+                },
+                columns: [
+                    {
+                        name: 'Id',
+                        key: 'id',
+                    },
+                    {
+                        name: 'Name',
+                        key: 'name',
+                    },
+                    {
+                        name: 'email',
+                        key: 'email',
+                    },
+                    {
+                        name: 'company',
+                        key: 'company',
+                    }
+                ],
+                actions: [
+                    {
+                        text: 'Click me', // Button label
+                        icon: 'glyphicon glyphicon-check', // Button icon
+                        class: 'btn-primary', // Button class (background color)
+                        event(e, row) { // Event handler callback. Gets event instace and selected row
+                            console.log('Click row: ', row); // If no row is selected, row will be NULL
+                        }
+                    }
+                ],
+                query:''
+            }
+        },
+        components: {
+            Datasource
+        },
+        methods: {
+            changePage(values) {
+                this.information.pagination.per_page = values.perpage;
+                this.information.data = this.information.data;
+            },
+            onSearch(searchQuery) {
+                this.query = searchQuery;
+            }
+        },
+        computed:{
+            getData(){
+                const self = this;
+                return self.information.data.filter(function (d) {
+                    if(d.name.indexOf(self.query) > -1){
+                        return d;
+                    }
+                })
             }
         }
     }
 </script>
 
-<style></style>
\ No newline at end of file
+<style src="../../../static/css/datasource.css"></style>
\ No newline at end of file

static/css/datasource.css

+.vue-datasource *{
+    box-sizing: border-box;
+    font-size: 14px;
+}
+.vue-datasource .panel {
+    margin-bottom: 22px;
+    background-color: #fff;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+.vue-datasource .panel-default {
+    border-color: #d3e0e9;
+}
+.vue-datasource .panel-heading {
+    padding: 10px 15px;
+    border-bottom: 1px solid transparent;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+}
+.vue-datasource .panel-default > .panel-heading {
+    height:56px;
+    color: #333333;
+    background-color: #fff;
+    border-color: #d3e0e9;
+}
+.vue-datasource .pull-left {
+    float: left !important;
+}
+.vue-datasource .pull-right {
+    float: right !important;
+}
+.vue-datasource .form-group {
+    margin-bottom: 15px;
+}
+.vue-datasource label {
+    display: inline-block;
+    max-width: 100%;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+.vue-datasource .form-control {
+    display: block;
+    width: 100%;
+    height: 36px;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.6;
+    color: #555555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccd0d2;
+    border-radius: 4px;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+.vue-datasource .btn {
+    display: inline-block;
+    margin-bottom: 0;
+    font-weight: normal;
+    text-align: center;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    background-image: none;
+    border: 1px solid transparent;
+    white-space: nowrap;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.6;
+    border-radius: 4px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.vue-datasource .btn-primary {
+    color: #fff;
+    background-color: #3097D1;
+    border-color: #2a88bd;
+}
+.vue-datasource .table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 22px;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+.vue-datasource .table > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 2px solid #ddd;
+}
+.vue-datasource .table th ,.vue-datasource .table td {
+    padding: 8px;
+    line-height: 1.6;
+    vertical-align: top;
+    border-top: 1px solid #ddd;
+}
+.vue-datasource .table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: #f9f9f9;
+}
+.vue-datasource .pagination {
+    display: inline-block;
+    padding-left: 0;
+    margin: 22px 0;
+    border-radius: 4px;
+}
+.vue-datasource .pagination > li {
+    display: inline;
+}
+.pagination > li > a,.pagination > li > span {
+    position: relative;
+    float: left;
+    padding: 6px 12px;
+    line-height: 1.6;
+    text-decoration: none;
+    color: #3097D1;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    margin-left: -1px;
+}
+.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
+    color: #777777;
+    background-color: #fff;
+    border-color: #ddd;
+    cursor: not-allowed;
+}
+.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
+    z-index: 3;
+    color: #fff;
+    background-color: #3097D1;
+    border-color: #3097D1;
+    cursor: default;
+}
+.vue-datasource .pagination > li:first-child > a, .vue-datasource .pagination > li:first-child > span {
+    margin-left: 0;
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px;
+}
+.vue-datasource .text-center {
+    text-align: center;
+}
+
+
+
+
+@media (min-width: 768px){
+    .form-inline .form-group {
+        display: inline-block;
+        margin-bottom: 0;
+        vertical-align: middle;
+    }
+    .form-inline .control-label {
+        margin-bottom: 0;
+        vertical-align: middle;
+    }
+    .form-inline .form-control {
+        display: inline-block;
+        width: auto;
+        vertical-align: middle;
+    }
+}