use mockjs
lin-xin
parent
3d4c886a68
commit
c495d279e5
|
|
@ -61,10 +61,10 @@ module.exports = {
|
|||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DllReferencePlugin({
|
||||
context: path.resolve(__dirname, '..'),
|
||||
manifest: require('./vendor-manifest.json')
|
||||
})
|
||||
]
|
||||
// plugins: [
|
||||
// new webpack.DllReferencePlugin({
|
||||
// context: path.resolve(__dirname, '..'),
|
||||
// manifest: require('./vendor-manifest.json')
|
||||
// })
|
||||
// ]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="./static/js/vendor.dll.js"></script>
|
||||
<!--<script src="./static/js/vendor.dll.js"></script>-->
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"axios": "^0.15.3",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"element-ui": "^1.2.2",
|
||||
"mockjs": "^1.0.1-beta3",
|
||||
"vue": "^2.1.10",
|
||||
"vue-core-image-upload": "^2.0.5",
|
||||
"vue-datasource": "^1.0.4",
|
||||
|
|
|
|||
|
|
@ -14,13 +14,11 @@
|
|||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址" :formatter="formatter">
|
||||
</el-table-column>
|
||||
<el-table-column prop="tag" label="标签" width="120"
|
||||
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
|
||||
:filter-method="filterTag">
|
||||
<el-table-column label="头像">
|
||||
<template scope="scope">
|
||||
<el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" close-transition>{{scope.row.tag}}
|
||||
</el-tag>
|
||||
<img :src="scope.row.logo">
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<template scope="scope">
|
||||
|
|
@ -33,6 +31,7 @@
|
|||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
@current-change ="handleCurrentChange"
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
|
|
@ -44,30 +43,24 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2017-02-02',
|
||||
name: '小天才',
|
||||
address: '东莞市长安镇步步高大道18号',
|
||||
tag: '家'
|
||||
}, {
|
||||
date: '2017-02-04',
|
||||
name: '小天才',
|
||||
address: '东莞市长安镇步步高大道17号',
|
||||
tag: '公司'
|
||||
}, {
|
||||
date: '2017-02-01',
|
||||
name: '小天才',
|
||||
address: '东莞市长安镇步步高大道19号',
|
||||
tag: '家'
|
||||
}, {
|
||||
date: '2017-02-03',
|
||||
name: '小天才',
|
||||
address: '东莞市长安镇步步高大道16号',
|
||||
tag: '公司'
|
||||
}]
|
||||
tableData: [],
|
||||
cur_page: 1
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
handleCurrentChange(val){
|
||||
this.cur_page = val;
|
||||
this.getData();
|
||||
},
|
||||
getData(){
|
||||
let self = this;
|
||||
this.$axios.post('/api/table',{page:self.cur_page}).then((res) => {
|
||||
self.tableData = res.data.data;
|
||||
})
|
||||
},
|
||||
formatter(row, column) {
|
||||
return row.address;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -42,8 +42,8 @@
|
|||
key: 'email',
|
||||
},
|
||||
{
|
||||
name: 'company',
|
||||
key: 'company',
|
||||
name: 'ip',
|
||||
key: 'ip',
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
}
|
||||
},
|
||||
beforeMount(){
|
||||
axios.get('/static/data.json').then( (res) => {
|
||||
axios.get('/api/source').then( (res) => {
|
||||
this.information = res.data;
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
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";
|
||||
import './mock/index.js';
|
||||
Vue.use(ElementUI);
|
||||
Vue.prototype.$axios = axios;
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
export const datasource = [
|
||||
{
|
||||
path: '/api/source',
|
||||
data: {
|
||||
'data|10':[{
|
||||
'id|+1':1,
|
||||
'name':'@cname',
|
||||
'email':'@email',
|
||||
'ip':'@ip'
|
||||
}],
|
||||
"pagination": {
|
||||
"total": 15,
|
||||
"per_page": 15,
|
||||
"current_page": 1,
|
||||
"last_page": 1,
|
||||
"from": 1,
|
||||
"to": 15
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import Mock from 'mockjs';
|
||||
import {vuetable} from './vuetable.js';
|
||||
import {datasource} from './datasource.js';
|
||||
|
||||
let data = [].concat(vuetable,datasource);
|
||||
|
||||
data.forEach(function(res){
|
||||
Mock.mock(res.path, res.data);
|
||||
});
|
||||
|
||||
export default Mock;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
export const vuetable = [
|
||||
{
|
||||
path: '/api/table',
|
||||
data: {
|
||||
'data|10':[{
|
||||
'date':'@date',
|
||||
'name':'@cname',
|
||||
'address':'@county(ture)',
|
||||
'logo':'@image("24x24",@color,@cfirst)'
|
||||
}]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -86,6 +86,7 @@
|
|||
margin-bottom: 22px;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.vue-datasource .table > thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
|
|
|
|||
Loading…
Reference in New Issue