forgetest5
/
vue-manage-system1
mirror of https://mirror.trustie.net/testforgeroot/vue-manage-system1.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add vue-datasource

This commit is contained in:
lin-xin 2017-02-18 10:47:10 +08:00
parent cafa07b982
commit 6f28eb0c1a
5 changed files with 260 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -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",

2
src/components/common/sidebar.vue
View File

@ -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>

2
src/components/page/VueEditor.vue
View File

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

95
src/components/page/VueTable.vue
View File

@ -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>
<style src="../../../static/css/datasource.css"></style>

163
static/css/datasource.css Normal file
View File

@ -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;
}
}