From 6f28eb0c1a3d04b415afe142f32e2a36dc924442 Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Sat, 18 Feb 2017 10:47:10 +0800
Subject: [PATCH] Add vue-datasource
---
package.json | 4 +-
src/components/common/sidebar.vue | 2 +-
src/components/page/VueEditor.vue | 2 +-
src/components/page/VueTable.vue | 95 ++++++++++++++++-
static/css/datasource.css | 163 ++++++++++++++++++++++++++++++
5 files changed, 260 insertions(+), 6 deletions(-)
create mode 100644 static/css/datasource.css
diff --git a/package.json b/package.json
index 2f6408e..04ad79c 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/common/sidebar.vue b/src/components/common/sidebar.vue
index e42763a..67433cd 100644
--- a/src/components/common/sidebar.vue
+++ b/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>
diff --git a/src/components/page/VueEditor.vue b/src/components/page/VueEditor.vue
index 5e75f19..87e58d7 100644
--- a/src/components/page/VueEditor.vue
+++ b/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
}
diff --git a/src/components/page/VueTable.vue b/src/components/page/VueTable.vue
index e04b4f8..b806040 100644
--- a/src/components/page/VueTable.vue
+++ b/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
diff --git a/static/css/datasource.css b/static/css/datasource.css
new file mode 100644
index 0000000..f4c9164
--- /dev/null
+++ b/static/css/datasource.css
@@ -0,0 +1,163 @@
+.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;
+ }
+}