github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

表格筛选

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1315
build/vendor-manifest.json
View File

File diff suppressed because one or more lines are too long

2
build/webpack.dll.conf.js
View File

@ -3,7 +3,7 @@ const webpack = require('webpack');
module.exports = {
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: {
path: path.join(__dirname, '../static/js'),

4
src/App.vue
View File

@ -5,6 +5,6 @@
</template>
<style>
@import "../static/css/main.css";
/*@import "../static/css/color-dark.css"; 深色主题*/
@import "../static/css/theme-green/color-green.css"; /*浅绿色主题*/
@import "../static/css/color-dark.css"; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; 浅绿色主题*/
</style>

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

@ -1,6 +1,6 @@
<template>
<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-if="item.subs">
<el-submenu :index="item.index">

16
src/components/page/BaseCharts.vue
View File

@ -10,14 +10,22 @@
vue-schart：vue.js封装sChart.js的图表组件。
访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
</div>
<div class="content-title">柱状图</div>
<schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart>
<div class="schart">
<div class="content-title">柱状图</div>
<schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart>
</div>
<div class="schart">
<div class="content-title">折线图</div>
<schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart>
</div>
<div class="schart">
<div class="content-title">饼状图</div>
<schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
</div>
<div class="schart">
<div class="content-title">环形图</div>
<schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
</div>
</div>
</template>
@ -62,6 +70,10 @@
</script>
<style scoped>
.schart{
width: 600px;
display: inline-block;
}
.content-title{
clear: both;
font-weight: 400;

58
src/components/page/BaseTable.vue
View File

@ -7,15 +7,15 @@
</el-breadcrumb>
</div>
<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-option key="1" label="广东省" value="1"></el-option>
<el-option key="2" label="湖南省" value="2"></el-option>
<el-option key="1" label="广东省" value="广东省"></el-option>
<el-option key="2" label="湖南省" value="湖南省"></el-option>
</el-select>
<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>
<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 prop="date" label="日期" sortable width="150">
</el-table-column>
@ -46,17 +46,41 @@
export default {
data() {
return {
url: '../../../static/vuetable.json',
url: './static/vuetable.json',
tableData: [],
cur_page: 1,
multipleSelection: [],
select_cate: '',
select_word: ''
select_word: '',
del_list: [],
is_search: false
}
},
created(){
this.getData();
},
computed: {
data(){
const self = this;
return self.tableData.filter(function(d){
let is_del = false;
for (let i = 0; i < self.del_list.length; i++) {
if(d.name === self.del_list[i].name){
is_del = true;
break;
}
}
if(!is_del){
if(d.address.indexOf(self.select_cate) > -1 &&
(d.name.indexOf(self.select_word) > -1 ||
d.address.indexOf(self.select_word) > -1)
){
return d;
}
}
})
}
},
methods: {
handleCurrentChange(val){
this.cur_page = val;
@ -71,6 +95,9 @@
self.tableData = res.data.list;
})
},
search(){
this.is_search = true;
},
formatter(row, column) {
return row.address;
},
@ -83,7 +110,18 @@
handleDelete(index, row) {
this.$message.error('删除第'+(index+1)+'行');
},
handleSelectionChange: function(val) {
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;
}
}
@ -94,10 +132,6 @@
.handle-box{
margin-bottom: 20px;
}
.handle-del{
border-color: #bfcbd9;
color: #999;
}
.handle-select{
width: 120px;
}

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

@ -41,7 +41,7 @@
export default {
data: function(){
return {
src: '../../../static/img/img.jpg',
src: './static/img/img.jpg',
fileList: []
}
},

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

@ -24,7 +24,7 @@
data: function(){
const self = this;
return {
url: '../../../static/datasource.json',
url: './static/datasource.json',
information: {
pagination:{},
data:[]

4
src/main.js
View File

@ -3,8 +3,8 @@ import App from './App';
import router from './router';
import axios from 'axios';
import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-default/index.css'; // 默认主题
import '../static/css/theme-green/index.css'; // 浅绿色主题
import 'element-ui/lib/theme-default/index.css'; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题
import "babel-polyfill";
Vue.use(ElementUI);

6
static/js/vendor.dll.js
View File

File diff suppressed because one or more lines are too long