表格筛选

old_v2.1.0
lin-xin 2017-07-12 15:22:43 +08:00
parent be4b78efe1
commit 75f998a5d6
10 changed files with 556 additions and 1823 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,29 +1,29 @@
const path = require('path'); const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
module.exports = { module.exports = {
entry: { entry: {
vendor: ['vue/dist/vue.common.js','vue-router', 'babel-polyfill','axios','vue-echarts-v3'] vendor: ['vue/dist/vue.common.js','vue-router', 'babel-polyfill','axios']
}, },
output: { output: {
path: path.join(__dirname, '../static/js'), path: path.join(__dirname, '../static/js'),
filename: '[name].dll.js', filename: '[name].dll.js',
library: '[name]_library' library: '[name]_library'
}, },
plugins: [ plugins: [
new webpack.DllPlugin({ new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'), path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library' name: '[name]_library'
}), }),
new webpack.optimize.UglifyJsPlugin({ new webpack.optimize.UglifyJsPlugin({
compress: { compress: {
warnings: false warnings: false
} }
}), }),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': { 'process.env': {
NODE_ENV: '"production"' NODE_ENV: '"production"'
} }
}) })
] ]
}; };

View File

@ -1,10 +1,10 @@
<template> <template>
<div id="app"> <div id="app">
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
<style> <style>
@import "../static/css/main.css"; @import "../static/css/main.css";
/*@import "../static/css/color-dark.css"; 深色主题*/ @import "../static/css/color-dark.css"; /*深色主题*/
@import "../static/css/theme-green/color-green.css"; /*浅绿色主题*/ /*@import "../static/css/theme-green/color-green.css"; 浅绿色主题*/
</style> </style>

View File

@ -1,104 +1,104 @@
<template> <template>
<div class="sidebar"> <div class="sidebar">
<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" unique-opened router> <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
<template v-for="item in items"> <template v-for="item in items">
<template v-if="item.subs"> <template v-if="item.subs">
<el-submenu :index="item.index"> <el-submenu :index="item.index">
<template slot="title"><i :class="item.icon"></i>{{ item.title }}</template> <template slot="title"><i :class="item.icon"></i>{{ item.title }}</template>
<el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }} <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
</template> </template>
<template v-else> <template v-else>
<el-menu-item :index="item.index"> <el-menu-item :index="item.index">
<i :class="item.icon"></i>{{ item.title }} <i :class="item.icon"></i>{{ item.title }}
</el-menu-item> </el-menu-item>
</template> </template>
</template> </template>
</el-menu> </el-menu>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
items: [ items: [
{ {
icon: 'el-icon-setting', icon: 'el-icon-setting',
index: 'readme', index: 'readme',
title: '自述' title: '自述'
}, },
{ {
icon: 'el-icon-menu', icon: 'el-icon-menu',
index: '2', index: '2',
title: '表格', title: '表格',
subs: [ subs: [
{ {
index: 'basetable', index: 'basetable',
title: '基础表格' title: '基础表格'
}, },
{ {
index: 'vuetable', index: 'vuetable',
title: 'Vue表格组件' title: 'Vue表格组件'
} }
] ]
}, },
{ {
icon: 'el-icon-date', icon: 'el-icon-date',
index: '3', index: '3',
title: '表单', title: '表单',
subs: [ subs: [
{ {
index: 'baseform', index: 'baseform',
title: '基本表单' title: '基本表单'
}, },
{ {
index: 'vueeditor', index: 'vueeditor',
title: '编辑器' title: '编辑器'
}, },
{ {
index: 'markdown', index: 'markdown',
title: 'markdown' title: 'markdown'
}, },
{ {
index: 'upload', index: 'upload',
title: '文件上传' title: '文件上传'
} }
] ]
}, },
{ {
icon: 'el-icon-star-on', icon: 'el-icon-star-on',
index: 'basecharts', index: 'basecharts',
title: '图表' title: '图表'
}, },
{ {
icon: 'el-icon-upload2', icon: 'el-icon-upload2',
index: 'drag', index: 'drag',
title: '拖拽' title: '拖拽'
} }
] ]
} }
}, },
computed:{ computed:{
onRoutes(){ onRoutes(){
return this.$route.path.replace('/',''); return this.$route.path.replace('/','');
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.sidebar{ .sidebar{
display: block; display: block;
position: absolute; position: absolute;
width: 250px; width: 250px;
left: 0; left: 0;
top: 70px; top: 70px;
bottom:0; bottom:0;
background: #2E363F; background: #2E363F;
} }
.sidebar > ul { .sidebar > ul {
height:100%; height:100%;
} }
</style> </style>

View File

@ -1,74 +1,86 @@
<template> <template>
<div> <div>
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item> <el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
<el-breadcrumb-item>基础图表</el-breadcrumb-item> <el-breadcrumb-item>基础图表</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="plugins-tips"> <div class="plugins-tips">
vue-schartvue.js封装sChart.js的图表组件 vue-schartvue.js封装sChart.js的图表组件
访问地址<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a> 访问地址<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
</div> </div>
<div class="content-title">柱状图</div> <div class="schart">
<schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart> <div class="content-title">柱状图</div>
<div class="content-title">折线图</div> <schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart>
<schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart> </div>
<div class="content-title">饼状图</div> <div class="schart">
<schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart> <div class="content-title">折线图</div>
<div class="content-title">环形图</div> <schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart>
<schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart> </div>
</div> <div class="schart">
</template> <div class="content-title">饼状图</div>
<schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
<script> </div>
import Schart from 'vue-schart'; <div class="schart">
export default { <div class="content-title">环形图</div>
components: { <schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
Schart </div>
}, </div>
data: () => ({ </template>
data1:[
{name:'2012',value:1141}, <script>
{name:'2013',value:1499}, import Schart from 'vue-schart';
{name:'2014',value:2260}, export default {
{name:'2015',value:1170}, components: {
{name:'2016',value:970}, Schart
{name:'2017',value:1450} },
], data: () => ({
data2 : [ data1:[
{name:'短袖',value:1200}, {name:'2012',value:1141},
{name:'休闲裤',value:1222}, {name:'2013',value:1499},
{name:'连衣裙',value:1283}, {name:'2014',value:2260},
{name:'外套',value:1314}, {name:'2015',value:1170},
{name:'羽绒服',value:2314} {name:'2016',value:970},
], {name:'2017',value:1450}
options1: { ],
title: '某商店近年营业总额', data2 : [
bgColor: '#829dda', {name:'短袖',value:1200},
titleColor: '#ffffff', {name:'休闲裤',value:1222},
fillColor: '#72f6ff', {name:'连衣裙',value:1283},
axisColor: '#eeeeee', {name:'外套',value:1314},
contentColor: '#bbbbbb' {name:'羽绒服',value:2314}
}, ],
options2: { options1: {
title: '某商店各商品年度销量', title: '某商店近年营业总额',
bgColor: '#829dca', bgColor: '#829dda',
titleColor: '#ffffff', titleColor: '#ffffff',
legendColor: '#ffffff' fillColor: '#72f6ff',
} axisColor: '#eeeeee',
}) contentColor: '#bbbbbb'
} },
</script> options2: {
title: '某商店各商品年度销量',
<style scoped> bgColor: '#829dca',
.content-title{ titleColor: '#ffffff',
clear: both; legendColor: '#ffffff'
font-weight: 400; }
line-height: 50px; })
margin: 10px 0; }
font-size: 22px; </script>
color: #1f2f3d;
} <style scoped>
.schart{
width: 600px;
display: inline-block;
}
.content-title{
clear: both;
font-weight: 400;
line-height: 50px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
</style> </style>

View File

@ -1,108 +1,142 @@
<template> <template>
<div class="table"> <div class="table">
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item> <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
<el-breadcrumb-item>基础表格</el-breadcrumb-item> <el-breadcrumb-item>基础表格</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="handle-box"> <div class="handle-box">
<el-button class="handle-del mr10">批量删除</el-button> <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll"></el-button>
<el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10"> <el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
<el-option key="1" label="广东省" value="1"></el-option> <el-option key="1" label="广东省" value="广东省"></el-option>
<el-option key="2" label="湖南省" value="2"></el-option> <el-option key="2" label="湖南省" value="湖南省"></el-option>
</el-select> </el-select>
<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input> <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
<el-button type="primary" icon="search">搜索</el-button> <el-button type="primary" icon="search" @click="search"></el-button>
</div> </div>
<el-table :data="tableData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange"> <el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column> <el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="date" label="日期" sortable width="150"> <el-table-column prop="date" label="日期" sortable width="150">
</el-table-column> </el-table-column>
<el-table-column prop="name" label="姓名" width="120"> <el-table-column prop="name" label="姓名" width="120">
</el-table-column> </el-table-column>
<el-table-column prop="address" label="地址" :formatter="formatter"> <el-table-column prop="address" label="地址" :formatter="formatter">
</el-table-column> </el-table-column>
<el-table-column label="操作" width="180"> <el-table-column label="操作" width="180">
<template scope="scope"> <template scope="scope">
<el-button size="small" <el-button size="small"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button> @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="small" type="danger" <el-button size="small" type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button> @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
@current-change ="handleCurrentChange" @current-change ="handleCurrentChange"
layout="prev, pager, next" layout="prev, pager, next"
:total="1000"> :total="1000">
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
url: '../../../static/vuetable.json', url: './static/vuetable.json',
tableData: [], tableData: [],
cur_page: 1, cur_page: 1,
multipleSelection: [], multipleSelection: [],
select_cate: '', select_cate: '',
select_word: '' select_word: '',
} del_list: [],
}, is_search: false
created(){ }
this.getData(); },
}, created(){
methods: { this.getData();
handleCurrentChange(val){ },
this.cur_page = val; computed: {
this.getData(); data(){
}, const self = this;
getData(){ return self.tableData.filter(function(d){
let self = this; let is_del = false;
if(process.env.NODE_ENV === 'development'){ for (let i = 0; i < self.del_list.length; i++) {
self.url = '/ms/table/list'; if(d.name === self.del_list[i].name){
}; is_del = true;
self.$axios.post(self.url, {page:self.cur_page}).then((res) => { break;
self.tableData = res.data.list; }
}) }
}, if(!is_del){
formatter(row, column) { if(d.address.indexOf(self.select_cate) > -1 &&
return row.address; (d.name.indexOf(self.select_word) > -1 ||
}, d.address.indexOf(self.select_word) > -1)
filterTag(value, row) { ){
return row.tag === value; return d;
}, }
handleEdit(index, row) { }
this.$message('编辑第'+(index+1)+'行'); })
}, }
handleDelete(index, row) { },
this.$message.error('删除第'+(index+1)+'行'); methods: {
}, handleCurrentChange(val){
handleSelectionChange: function(val) { this.cur_page = val;
this.multipleSelection = val; this.getData();
} },
} getData(){
} let self = this;
</script> if(process.env.NODE_ENV === 'development'){
self.url = '/ms/table/list';
<style scoped> };
.handle-box{ self.$axios.post(self.url, {page:self.cur_page}).then((res) => {
margin-bottom: 20px; self.tableData = res.data.list;
} })
.handle-del{ },
border-color: #bfcbd9; search(){
color: #999; this.is_search = true;
} },
.handle-select{ formatter(row, column) {
width: 120px; return row.address;
} },
.handle-input{ filterTag(value, row) {
width: 300px; return row.tag === value;
display: inline-block; },
} handleEdit(index, row) {
this.$message('编辑第'+(index+1)+'行');
},
handleDelete(index, row) {
this.$message.error('删除第'+(index+1)+'行');
},
delAll(){
const self = this,
length = self.multipleSelection.length;
let str = '';
self.del_list = self.del_list.concat(self.multipleSelection);
for (let i = 0; i < length; i++) {
str += self.multipleSelection[i].name + ' ';
}
self.$message.error('删除了'+str);
self.multipleSelection = [];
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>
<style scoped>
.handle-box{
margin-bottom: 20px;
}
.handle-select{
width: 120px;
}
.handle-input{
width: 300px;
display: inline-block;
}
</style> </style>

View File

@ -1,78 +1,78 @@
<template> <template>
<div> <div>
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item> <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item>图片上传</el-breadcrumb-item> <el-breadcrumb-item>图片上传</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="content-title">支持拖拽</div> <div class="content-title">支持拖拽</div>
<div class="plugins-tips"> <div class="plugins-tips">
Element UI自带上传组件 Element UI自带上传组件
访问地址<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a> 访问地址<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
</div> </div>
<el-upload <el-upload
class="upload-demo" class="upload-demo"
drag drag
action="/api/posts/" action="/api/posts/"
multiple> multiple>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件且不超过500kb</div> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload> </el-upload>
<div class="content-title">支持裁剪</div> <div class="content-title">支持裁剪</div>
<div class="plugins-tips"> <div class="plugins-tips">
Vue-Core-Image-Upload一款轻量级的vue上传插件支持裁剪 Vue-Core-Image-Upload一款轻量级的vue上传插件支持裁剪
访问地址<a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank">Vue-Core-Image-Upload</a> 访问地址<a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank">Vue-Core-Image-Upload</a>
</div> </div>
<img class="pre-img" :src="src" alt=""> <img class="pre-img" :src="src" alt="">
<vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']" <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
:crop="true" :crop="true"
text="上传图片" text="上传图片"
url="/api/posts/" url="/api/posts/"
extensions="png,gif,jpeg,jpg" extensions="png,gif,jpeg,jpg"
@:imageuploaded="imageuploaded" @:imageuploaded="imageuploaded"
@:errorhandle="handleError"></vue-core-image-upload> @:errorhandle="handleError"></vue-core-image-upload>
</div> </div>
</template> </template>
<script> <script>
import VueCoreImageUpload from 'vue-core-image-upload'; import VueCoreImageUpload from 'vue-core-image-upload';
export default { export default {
data: function(){ data: function(){
return { return {
src: '../../../static/img/img.jpg', src: './static/img/img.jpg',
fileList: [] fileList: []
} }
}, },
components: { components: {
VueCoreImageUpload VueCoreImageUpload
}, },
methods:{ methods:{
imageuploaded(res) { imageuploaded(res) {
console.log(res) console.log(res)
}, },
handleError(){ handleError(){
this.$notify.error({ this.$notify.error({
title: '上传失败', title: '上传失败',
message: '图片上传接口上传失败,可更改为自己的服务器接口' message: '图片上传接口上传失败,可更改为自己的服务器接口'
}); });
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.content-title{ .content-title{
font-weight: 400; font-weight: 400;
line-height: 50px; line-height: 50px;
margin: 10px 0; margin: 10px 0;
font-size: 22px; font-size: 22px;
color: #1f2f3d; color: #1f2f3d;
} }
.pre-img{ .pre-img{
width:250px; width:250px;
height: 250px; height: 250px;
margin-bottom: 20px; margin-bottom: 20px;
} }
</style> </style>

View File

@ -1,95 +1,95 @@
<template> <template>
<div class="table"> <div class="table">
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item> <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
<el-breadcrumb-item>Vue表格组件</el-breadcrumb-item> <el-breadcrumb-item>Vue表格组件</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="plugins-tips"> <div class="plugins-tips">
vue-datasource一个用于动态创建表格的vue.js服务端组件 vue-datasource一个用于动态创建表格的vue.js服务端组件
访问地址<a href="https://github.com/coderdiaz/vue-datasource" target="_blank">vue-datasource</a> 访问地址<a href="https://github.com/coderdiaz/vue-datasource" target="_blank">vue-datasource</a>
</div> </div>
<datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination" <datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination"
:actions="actions" :actions="actions"
v-on:change="changePage" v-on:change="changePage"
v-on:searching="onSearch"></datasource> v-on:searching="onSearch"></datasource>
</div> </div>
</template> </template>
<script> <script>
import axios from 'axios'; import axios from 'axios';
import Datasource from 'vue-datasource'; import Datasource from 'vue-datasource';
export default { export default {
data: function(){ data: function(){
const self = this; const self = this;
return { return {
url: '../../../static/datasource.json', url: './static/datasource.json',
information: { information: {
pagination:{}, pagination:{},
data:[] data:[]
}, },
columns: [ columns: [
{ {
name: 'Id', name: 'Id',
key: 'id', key: 'id',
}, },
{ {
name: 'Name', name: 'Name',
key: 'name', key: 'name',
}, },
{ {
name: 'email', name: 'email',
key: 'email', key: 'email',
}, },
{ {
name: 'ip', name: 'ip',
key: 'ip', key: 'ip',
} }
], ],
actions: [ actions: [
{ {
text: 'Click', text: 'Click',
class: 'btn-primary', class: 'btn-primary',
event(e, row) { event(e, row) {
self.$message('选中的行数: ' + row.row.id); self.$message('选中的行数: ' + row.row.id);
} }
} }
], ],
query:'' query:''
} }
}, },
components: { components: {
Datasource Datasource
}, },
methods: { methods: {
changePage(values) { changePage(values) {
this.information.pagination.per_page = values.perpage; this.information.pagination.per_page = values.perpage;
this.information.data = this.information.data; this.information.data = this.information.data;
}, },
onSearch(searchQuery) { onSearch(searchQuery) {
this.query = searchQuery; this.query = searchQuery;
} }
}, },
computed:{ computed:{
getData(){ getData(){
const self = this; const self = this;
return self.information.data.filter(function (d) { return self.information.data.filter(function (d) {
if(d.name.indexOf(self.query) > -1){ if(d.name.indexOf(self.query) > -1){
return d; return d;
} }
}) })
} }
}, },
beforeMount(){ beforeMount(){
if(process.env.NODE_ENV === 'development'){ if(process.env.NODE_ENV === 'development'){
this.url = '/ms/table/source'; this.url = '/ms/table/source';
}; };
axios.get(this.url).then( (res) => { axios.get(this.url).then( (res) => {
this.information = res.data; this.information = res.data;
}) })
} }
} }
</script> </script>
<style src="../../../static/css/datasource.css"></style> <style src="../../../static/css/datasource.css"></style>

View File

@ -1,15 +1,15 @@
import Vue from 'vue'; import Vue from 'vue';
import App from './App'; import App from './App';
import router from './router'; import router from './router';
import axios from 'axios'; import axios from 'axios';
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-default/index.css'; // 默认主题 import 'element-ui/lib/theme-default/index.css'; // 默认主题
import '../static/css/theme-green/index.css'; // 浅绿色主题 // import '../static/css/theme-green/index.css'; // 浅绿色主题
import "babel-polyfill"; import "babel-polyfill";
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.prototype.$axios = axios; Vue.prototype.$axios = axios;
new Vue({ new Vue({
router, router,
render: h => h(App) render: h => h(App)
}).$mount('#app'); }).$mount('#app');

File diff suppressed because one or more lines are too long