表格筛选
lin-xin
parent
be4b78efe1
commit
75f998a5d6
File diff suppressed because one or more lines are too long
|
|
@ -1,29 +1,29 @@
|
|||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
vendor: ['vue/dist/vue.common.js','vue-router', 'babel-polyfill','axios','vue-echarts-v3']
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, '../static/js'),
|
||||
filename: '[name].dll.js',
|
||||
library: '[name]_library'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DllPlugin({
|
||||
path: path.join(__dirname, '.', '[name]-manifest.json'),
|
||||
name: '[name]_library'
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
})
|
||||
]
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
vendor: ['vue/dist/vue.common.js','vue-router', 'babel-polyfill','axios']
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, '../static/js'),
|
||||
filename: '[name].dll.js',
|
||||
library: '[name]_library'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DllPlugin({
|
||||
path: path.join(__dirname, '.', '[name]-manifest.json'),
|
||||
name: '[name]_library'
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
})
|
||||
]
|
||||
};
|
||||
18
src/App.vue
18
src/App.vue
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
@import "../static/css/main.css";
|
||||
/*@import "../static/css/color-dark.css"; 深色主题*/
|
||||
@import "../static/css/theme-green/color-green.css"; /*浅绿色主题*/
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
@import "../static/css/main.css";
|
||||
@import "../static/css/color-dark.css"; /*深色主题*/
|
||||
/*@import "../static/css/theme-green/color-green.css"; 浅绿色主题*/
|
||||
</style>
|
||||
|
|
@ -1,104 +1,104 @@
|
|||
<template>
|
||||
<div class="sidebar">
|
||||
<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" unique-opened router>
|
||||
<template v-for="item in items">
|
||||
<template v-if="item.subs">
|
||||
<el-submenu :index="item.index">
|
||||
<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>
|
||||
</el-submenu>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-menu-item :index="item.index">
|
||||
<i :class="item.icon"></i>{{ item.title }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
icon: 'el-icon-setting',
|
||||
index: 'readme',
|
||||
title: '自述'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-menu',
|
||||
index: '2',
|
||||
title: '表格',
|
||||
subs: [
|
||||
{
|
||||
index: 'basetable',
|
||||
title: '基础表格'
|
||||
},
|
||||
{
|
||||
index: 'vuetable',
|
||||
title: 'Vue表格组件'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-date',
|
||||
index: '3',
|
||||
title: '表单',
|
||||
subs: [
|
||||
{
|
||||
index: 'baseform',
|
||||
title: '基本表单'
|
||||
},
|
||||
{
|
||||
index: 'vueeditor',
|
||||
title: '编辑器'
|
||||
},
|
||||
{
|
||||
index: 'markdown',
|
||||
title: 'markdown'
|
||||
},
|
||||
{
|
||||
index: 'upload',
|
||||
title: '文件上传'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-star-on',
|
||||
index: 'basecharts',
|
||||
title: '图表'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-upload2',
|
||||
index: 'drag',
|
||||
title: '拖拽'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
onRoutes(){
|
||||
return this.$route.path.replace('/','');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar{
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
left: 0;
|
||||
top: 70px;
|
||||
bottom:0;
|
||||
background: #2E363F;
|
||||
}
|
||||
.sidebar > ul {
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<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">
|
||||
<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>
|
||||
</el-submenu>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-menu-item :index="item.index">
|
||||
<i :class="item.icon"></i>{{ item.title }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
icon: 'el-icon-setting',
|
||||
index: 'readme',
|
||||
title: '自述'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-menu',
|
||||
index: '2',
|
||||
title: '表格',
|
||||
subs: [
|
||||
{
|
||||
index: 'basetable',
|
||||
title: '基础表格'
|
||||
},
|
||||
{
|
||||
index: 'vuetable',
|
||||
title: 'Vue表格组件'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-date',
|
||||
index: '3',
|
||||
title: '表单',
|
||||
subs: [
|
||||
{
|
||||
index: 'baseform',
|
||||
title: '基本表单'
|
||||
},
|
||||
{
|
||||
index: 'vueeditor',
|
||||
title: '编辑器'
|
||||
},
|
||||
{
|
||||
index: 'markdown',
|
||||
title: 'markdown'
|
||||
},
|
||||
{
|
||||
index: 'upload',
|
||||
title: '文件上传'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-star-on',
|
||||
index: 'basecharts',
|
||||
title: '图表'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-upload2',
|
||||
index: 'drag',
|
||||
title: '拖拽'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
onRoutes(){
|
||||
return this.$route.path.replace('/','');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar{
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
left: 0;
|
||||
top: 70px;
|
||||
bottom:0;
|
||||
background: #2E363F;
|
||||
}
|
||||
.sidebar > ul {
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,74 +1,86 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>基础图表</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="plugins-tips">
|
||||
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="content-title">折线图</div>
|
||||
<schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart>
|
||||
<div class="content-title">饼状图</div>
|
||||
<schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
|
||||
<div class="content-title">环形图</div>
|
||||
<schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Schart from 'vue-schart';
|
||||
export default {
|
||||
components: {
|
||||
Schart
|
||||
},
|
||||
data: () => ({
|
||||
data1:[
|
||||
{name:'2012',value:1141},
|
||||
{name:'2013',value:1499},
|
||||
{name:'2014',value:2260},
|
||||
{name:'2015',value:1170},
|
||||
{name:'2016',value:970},
|
||||
{name:'2017',value:1450}
|
||||
],
|
||||
data2 : [
|
||||
{name:'短袖',value:1200},
|
||||
{name:'休闲裤',value:1222},
|
||||
{name:'连衣裙',value:1283},
|
||||
{name:'外套',value:1314},
|
||||
{name:'羽绒服',value:2314}
|
||||
],
|
||||
options1: {
|
||||
title: '某商店近年营业总额',
|
||||
bgColor: '#829dda',
|
||||
titleColor: '#ffffff',
|
||||
fillColor: '#72f6ff',
|
||||
axisColor: '#eeeeee',
|
||||
contentColor: '#bbbbbb'
|
||||
},
|
||||
options2: {
|
||||
title: '某商店各商品年度销量',
|
||||
bgColor: '#829dca',
|
||||
titleColor: '#ffffff',
|
||||
legendColor: '#ffffff'
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-title{
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
margin: 10px 0;
|
||||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>基础图表</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="plugins-tips">
|
||||
vue-schart：vue.js封装sChart.js的图表组件。
|
||||
访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import Schart from 'vue-schart';
|
||||
export default {
|
||||
components: {
|
||||
Schart
|
||||
},
|
||||
data: () => ({
|
||||
data1:[
|
||||
{name:'2012',value:1141},
|
||||
{name:'2013',value:1499},
|
||||
{name:'2014',value:2260},
|
||||
{name:'2015',value:1170},
|
||||
{name:'2016',value:970},
|
||||
{name:'2017',value:1450}
|
||||
],
|
||||
data2 : [
|
||||
{name:'短袖',value:1200},
|
||||
{name:'休闲裤',value:1222},
|
||||
{name:'连衣裙',value:1283},
|
||||
{name:'外套',value:1314},
|
||||
{name:'羽绒服',value:2314}
|
||||
],
|
||||
options1: {
|
||||
title: '某商店近年营业总额',
|
||||
bgColor: '#829dda',
|
||||
titleColor: '#ffffff',
|
||||
fillColor: '#72f6ff',
|
||||
axisColor: '#eeeeee',
|
||||
contentColor: '#bbbbbb'
|
||||
},
|
||||
options2: {
|
||||
title: '某商店各商品年度销量',
|
||||
bgColor: '#829dca',
|
||||
titleColor: '#ffffff',
|
||||
legendColor: '#ffffff'
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
|
@ -1,108 +1,142 @@
|
|||
<template>
|
||||
<div class="table">
|
||||
<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>
|
||||
</div>
|
||||
<div class="handle-box">
|
||||
<el-button class="handle-del mr10">批量删除</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-select>
|
||||
<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
|
||||
<el-button type="primary" icon="search">搜索</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData" 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>
|
||||
<el-table-column prop="name" label="姓名" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址" :formatter="formatter">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<template scope="scope">
|
||||
<el-button size="small"
|
||||
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger"
|
||||
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
@current-change ="handleCurrentChange"
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: '../../../static/vuetable.json',
|
||||
tableData: [],
|
||||
cur_page: 1,
|
||||
multipleSelection: [],
|
||||
select_cate: '',
|
||||
select_word: ''
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
handleCurrentChange(val){
|
||||
this.cur_page = val;
|
||||
this.getData();
|
||||
},
|
||||
getData(){
|
||||
let self = this;
|
||||
if(process.env.NODE_ENV === 'development'){
|
||||
self.url = '/ms/table/list';
|
||||
};
|
||||
self.$axios.post(self.url, {page:self.cur_page}).then((res) => {
|
||||
self.tableData = res.data.list;
|
||||
})
|
||||
},
|
||||
formatter(row, column) {
|
||||
return row.address;
|
||||
},
|
||||
filterTag(value, row) {
|
||||
return row.tag === value;
|
||||
},
|
||||
handleEdit(index, row) {
|
||||
this.$message('编辑第'+(index+1)+'行');
|
||||
},
|
||||
handleDelete(index, row) {
|
||||
this.$message.error('删除第'+(index+1)+'行');
|
||||
},
|
||||
handleSelectionChange: function(val) {
|
||||
this.multipleSelection = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.handle-box{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.handle-del{
|
||||
border-color: #bfcbd9;
|
||||
color: #999;
|
||||
}
|
||||
.handle-select{
|
||||
width: 120px;
|
||||
}
|
||||
.handle-input{
|
||||
width: 300px;
|
||||
display: inline-block;
|
||||
}
|
||||
<template>
|
||||
<div class="table">
|
||||
<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>
|
||||
</div>
|
||||
<div class="handle-box">
|
||||
<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="广东省"></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" @click="search">搜索</el-button>
|
||||
</div>
|
||||
<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>
|
||||
<el-table-column prop="name" label="姓名" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址" :formatter="formatter">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<template scope="scope">
|
||||
<el-button size="small"
|
||||
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger"
|
||||
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
@current-change ="handleCurrentChange"
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: './static/vuetable.json',
|
||||
tableData: [],
|
||||
cur_page: 1,
|
||||
multipleSelection: [],
|
||||
select_cate: '',
|
||||
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;
|
||||
this.getData();
|
||||
},
|
||||
getData(){
|
||||
let self = this;
|
||||
if(process.env.NODE_ENV === 'development'){
|
||||
self.url = '/ms/table/list';
|
||||
};
|
||||
self.$axios.post(self.url, {page:self.cur_page}).then((res) => {
|
||||
self.tableData = res.data.list;
|
||||
})
|
||||
},
|
||||
search(){
|
||||
this.is_search = true;
|
||||
},
|
||||
formatter(row, column) {
|
||||
return row.address;
|
||||
},
|
||||
filterTag(value, row) {
|
||||
return row.tag === value;
|
||||
},
|
||||
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>
|
||||
|
|
@ -1,78 +1,78 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>图片上传</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="content-title">支持拖拽</div>
|
||||
<div class="plugins-tips">
|
||||
Element UI自带上传组件。
|
||||
访问地址：<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
|
||||
</div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="/api/posts/"
|
||||
multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<div class="content-title">支持裁剪</div>
|
||||
<div class="plugins-tips">
|
||||
Vue-Core-Image-Upload：一款轻量级的vue上传插件，支持裁剪。
|
||||
访问地址：<a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank">Vue-Core-Image-Upload</a>
|
||||
</div>
|
||||
<img class="pre-img" :src="src" alt="">
|
||||
<vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
|
||||
:crop="true"
|
||||
text="上传图片"
|
||||
url="/api/posts/"
|
||||
extensions="png,gif,jpeg,jpg"
|
||||
@:imageuploaded="imageuploaded"
|
||||
@:errorhandle="handleError"></vue-core-image-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueCoreImageUpload from 'vue-core-image-upload';
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
src: '../../../static/img/img.jpg',
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VueCoreImageUpload
|
||||
},
|
||||
methods:{
|
||||
imageuploaded(res) {
|
||||
console.log(res)
|
||||
},
|
||||
handleError(){
|
||||
this.$notify.error({
|
||||
title: '上传失败',
|
||||
message: '图片上传接口上传失败，可更改为自己的服务器接口'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-title{
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
margin: 10px 0;
|
||||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
.pre-img{
|
||||
width:250px;
|
||||
height: 250px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>图片上传</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="content-title">支持拖拽</div>
|
||||
<div class="plugins-tips">
|
||||
Element UI自带上传组件。
|
||||
访问地址：<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
|
||||
</div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="/api/posts/"
|
||||
multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<div class="content-title">支持裁剪</div>
|
||||
<div class="plugins-tips">
|
||||
Vue-Core-Image-Upload：一款轻量级的vue上传插件，支持裁剪。
|
||||
访问地址：<a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank">Vue-Core-Image-Upload</a>
|
||||
</div>
|
||||
<img class="pre-img" :src="src" alt="">
|
||||
<vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
|
||||
:crop="true"
|
||||
text="上传图片"
|
||||
url="/api/posts/"
|
||||
extensions="png,gif,jpeg,jpg"
|
||||
@:imageuploaded="imageuploaded"
|
||||
@:errorhandle="handleError"></vue-core-image-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueCoreImageUpload from 'vue-core-image-upload';
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
src: './static/img/img.jpg',
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VueCoreImageUpload
|
||||
},
|
||||
methods:{
|
||||
imageuploaded(res) {
|
||||
console.log(res)
|
||||
},
|
||||
handleError(){
|
||||
this.$notify.error({
|
||||
title: '上传失败',
|
||||
message: '图片上传接口上传失败，可更改为自己的服务器接口'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-title{
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
margin: 10px 0;
|
||||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
.pre-img{
|
||||
width:250px;
|
||||
height: 250px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,95 +1,95 @@
|
|||
<template>
|
||||
<div class="table">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-menu"></i> 表格</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 axios from 'axios';
|
||||
import Datasource from 'vue-datasource';
|
||||
export default {
|
||||
data: function(){
|
||||
const self = this;
|
||||
return {
|
||||
url: '../../../static/datasource.json',
|
||||
information: {
|
||||
pagination:{},
|
||||
data:[]
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
name: 'Id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
name: 'Name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
key: 'email',
|
||||
},
|
||||
{
|
||||
name: 'ip',
|
||||
key: 'ip',
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
text: 'Click',
|
||||
class: 'btn-primary',
|
||||
event(e, row) {
|
||||
self.$message('选中的行数： ' + row.row.id);
|
||||
}
|
||||
}
|
||||
],
|
||||
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;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeMount(){
|
||||
if(process.env.NODE_ENV === 'development'){
|
||||
this.url = '/ms/table/source';
|
||||
};
|
||||
axios.get(this.url).then( (res) => {
|
||||
this.information = res.data;
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="table">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-menu"></i> 表格</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 axios from 'axios';
|
||||
import Datasource from 'vue-datasource';
|
||||
export default {
|
||||
data: function(){
|
||||
const self = this;
|
||||
return {
|
||||
url: './static/datasource.json',
|
||||
information: {
|
||||
pagination:{},
|
||||
data:[]
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
name: 'Id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
name: 'Name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
key: 'email',
|
||||
},
|
||||
{
|
||||
name: 'ip',
|
||||
key: 'ip',
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
text: 'Click',
|
||||
class: 'btn-primary',
|
||||
event(e, row) {
|
||||
self.$message('选中的行数： ' + row.row.id);
|
||||
}
|
||||
}
|
||||
],
|
||||
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;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeMount(){
|
||||
if(process.env.NODE_ENV === 'development'){
|
||||
this.url = '/ms/table/source';
|
||||
};
|
||||
axios.get(this.url).then( (res) => {
|
||||
this.information = res.data;
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="../../../static/css/datasource.css"></style>
|
||||
28
src/main.js
28
src/main.js
|
|
@ -1,15 +1,15 @@
|
|||
import Vue from 'vue';
|
||||
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 "babel-polyfill";
|
||||
|
||||
Vue.use(ElementUI);
|
||||
Vue.prototype.$axios = axios;
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
import Vue from 'vue';
|
||||
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 "babel-polyfill";
|
||||
|
||||
Vue.use(ElementUI);
|
||||
Vue.prototype.$axios = axios;
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app');
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue