表格筛选

build/webpack.dll.conf.js

@@ -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"'
+      }
+    })
+  ]
 };

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>

src/components/common/Sidebar.vue

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

src/components/page/BaseCharts.vue

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

src/components/page/BaseTable.vue

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

src/components/page/Upload.vue

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

src/components/page/VueTable.vue

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

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');