表格筛选
parent
be4b78efe1
commit
75f998a5d6
File diff suppressed because one or more lines are too long
|
@ -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"'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
]
|
]
|
||||||
};
|
};
|
18
src/App.vue
18
src/App.vue
|
@ -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>
|
|
@ -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>
|
||||||
|
|
|
@ -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-schart:vue.js封装sChart.js的图表组件。
|
vue-schart:vue.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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
28
src/main.js
28
src/main.js
|
@ -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
Loading…
Reference in New Issue