element+vue显示数据库数据

App.vue

<template>
<div id="app" class="app">
<div class="heard" id="heard">
<h1>部门统计</h1>
</div>
<div id="Statistics">
<div id="heard3">
<h4>统计项</h4>
</div>
<el-col :span="12" class="left" style="width: 100%">
<el-menu
class="el-menu-vertical-demo"
background-color="#545c63"
text-color="#fff"
:default-openeds="defaultOpen"
@open="handleOpen"
active-text-color="#ffd04b">
<el-submenu index="1" @click.native="bugs()">
<template slot="title">
<i class="el-icon-info"></i>
<span>BUG排行榜</span>
</template>
<transition
appear
appear-active-class="animated flash"
name="submenu1-transition"
enter-active-class="animated fadeInLeftBig"
>
<el-menu-item-group v-if="showBugs">
<template v-for="user in bugsData">
<el-menu-item align="center" @click="timeOutBugs(user._id)">
<p >{{user._id}} 累计: {{user._sum}}次</p>
</el-menu-item>
</template>
</el-menu-item-group>
</transition>
</el-submenu>
<el-submenu index="2" @click.native="ideas" >
<template slot="title">
<i class="el-icon-info"></i>
<span>IDEAS排行榜</span>
</template>
<transition
appear
appear-active-class="animated flash"
name="submenu2-transition"
enter-active-class="animated fadeInLeftBig"
>
<el-menu-item-group v-if="showIdeas">
<template v-for="user in ideasData">
<el-menu-item align="center" @click.native="timeOutIseas(user._id)">
<p>{{user._id}} 累计: {{user._sum}}次</p>
</el-menu-item>
</template>
</el-menu-item-group>
</transition>
</el-submenu>
</el-menu>
</el-col>
</div>
<div id="table" class="table">
<div id="heard2">
<h4>{{title}}</h4>
</div>
<transition
appear
appear-active-class="animated bounce"
name="table1-transition"
enter-active-class="animated fadeInDown"
>
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
empty-text="暂时没有数据............."
style="width: 100%"
:cell-style="changeCellStyle"
v-loading="loading"
v-if="showBugs"
max-height="1000">
<el-table-column width="50px" type="index" label="序号" align="center"></el-table-column>
<el-table-column width="160px" prop="create_date" label="日期" align="center" :formatter="dateFormat"></el-table-column>
<el-table-column width="70px" prop="name" label="姓名" align="center"></el-table-column>
<el-table-column width="100px" prop="project_name" label="项目" align="center"></el-table-column>
<el-table-column width="780px" prop="desc" label="描述"></el-table-column>
<el-table-column
label="操作"
align="center"
width="100">
<template slot-scope="scope">
<el-button type="danger" size="small" @click="deleteBugInfor(scope.row['desc'])">删除</el-button>
</template>
</el-table-column>
</el-table>
</transition>
<transition
appear
appear-active-class="animated bounce"
name="table2-transition"
enter-active-class="animated fadeInUp"
>
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
empty-text="暂时没有数据............."
style="width: 100%"
:cell-style="changeCellStyle"
v-if="showIdeas"
max-height="1000">
<el-table-column width="50px" type="index" label="序号" align="center"></el-table-column>
<el-table-column width="160px" prop="create_date" label="日期" align="center" :formatter="dateFormat"></el-table-column>
<el-table-column width="70px" prop="name" label="姓名" align="center"></el-table-column>
<el-table-column width="100px" prop="project_name" label="项目" align="center"></el-table-column>
<el-table-column width="780px" prop="desc" label="描述"></el-table-column>
<el-table-column
label="操作"
align="center"
width="100">
<template slot-scope="scope">
<el-button type="danger" size="small" @click="deleteIdeasInfor(scope.row['desc'])">删除</el-button>
</template>
</el-table-column>
</el-table>
</transition>
<div id="pagination" class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next"
:total="tableData.length">
</el-pagination>
</div>
</div><br>
</div>
</template>

<script>
import axios from 'axios';
import moment from "moment";
export default {
name: "App2",
data () {
return {
message: "index.html",
tableData: [],
bugsData: [],
title: "详情",
ideasData: [],
loading: true,
showBugs: true,
showIdeas: false,
_id: "",
url: "",
flag: 1,
defaultOpen: ["1"],
currentPage: 1, //默认显示页面为1
pagesize: 10, //每页的数据条数
}
},
methods: {
dateFormat:function(row, column) { //时间戳，没有可以不用
const date = row[column.property];
if (date === undefined) {
return "";
}
return moment(date).format("YYYY-MM-DD HH:mm:ss");
},
handleSizeChange: function(size) {
this.pagesize = size;
},
//点击第几页
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage;
},
changeCellStyle({rowIndex}) {
//第八列添加 red 类
if(rowIndex%2 === 1){
return 'backgroundColor: #FFFFEE';
}
},
ideas: function () {
this.flag=2;
this.title = "IDEAS详情";
axios.get('http://localhost:3000/api/ideas/find').then((res)=>{
this.tableData = (res.data);
console.log(this.tableData)
}).catch((err)=>{
console.log(err);
});
this.showBugs = false;
this.showIdeas = true;
this.loading =false;
},
bugs: function () {
this.flag=1;
this.title = "BUG详情";
axios.get('http://localhost:3000/api/bugs/find').then((res)=>{
this.tableData = (res.data);
console.log(this.tableData);
console.log()
}).catch((err)=>{
console.log(err);
});
this.showBugs = true;
this.showIdeas = false;
this.loading =false;
},
bugNum: function () {
axios.get('http://localhost:3000/api/bugs/find_group').then((res)=>{
this.bugsData = (res.data);
console.log(this.bugsData)
}).catch((err)=>{
console.log(err);
});
},
ideasNum: function () {
axios.get('http://localhost:3000/api/ideas/find_group').then((res)=>{
this.ideasData = (res.data);
console.log(this.ideasData)
}).catch((err)=>{
console.log(err);
});
},
//展开当前一级菜单，关闭其他的菜单
handleOpen: function (key) {
//当前打开的sub-menu的 key 数组
this.defaultOpen = [key];
console.log(this.defaultOpen)
},
selfBugsInfor: function (name) {
let params = {
name: name,
};
this.flag = 2;
this.title = name+"的BUG详情";
axios.post('http://localhost:3000/api/bugs/findSelf', params).then((res)=>{
this.tableData = (res.data);
console.log(res.data)
}).catch((err)=>{
console.log(err);
});
},
selfIdeasInfor: function (name) {
let params = {
name: name,
};
this.flag = 2;
this.title = name+"的IDEAS详情";
axios.post('http://localhost:3000/api/ideas/findSelf', params).then((res)=>{
this.tableData = (res.data);
console.log(res.data)
}).catch((err)=>{
console.log(err);
});
},
timeOutBugs: function (name) {
const that = this;
setTimeout(() =>{that.selfBugsInfor(name)},30);
},
timeOutIseas: function (name) {
const that = this;
setTimeout(() =>{that.selfIdeasInfor(name)},30);
},
deleteBugInfor: function (desc) {
let params = {
desc: desc,
};
this.showBugs = true;
this.showIdeas = false;
this.loading = false;
this.currentPage = 1;
axios.post('http://localhost:3000/api/bugs/delete' , params).then((res)=>{
alert("删除成功！");
this.bugs();
this.bugNum();
}).catch((err)=>{
console.log(err);
alert("删除失败！");
});
},
deleteIdeasInfor: function (desc) {
let params = {
desc: desc,
};
this.showBugs = false;
this.showIdeas = true;
this.loading = false;
this.currentPage = 1;
axios.post('http://localhost:3000/api/ideas/delete' , params).then((res)=>{
alert("删除成功！");
this.ideas();
this.ideasNum();
}).catch((err)=>{
console.log(err);
alert("删除失败！");
});
},
},
mounted (http://www.amjmh.com) {
axios.get('http://localhost:3000/api/bugs/find').then((res)=>{
this.tableData = (res.data);
this.loading = false;
this.title = "BUG详情";
console.log(this.tableData)
}).catch((err)=>{
console.log(err);
});
axios.get('http://localhost:3000/api/bugs/find_group').then((res)=>{
this.bugsData = (res.data);
console.log(this.bugsData)
}).catch((err)=>{
console.log(err);
});
axios.get('http://localhost:3000/api/ideas/find_group').then((res)=>{
this.ideasData = (res.data);
console.log(this.ideasData)
}).catch((err)=>{
console.log(err);
});
},
}
</script>

<style>
#table{
float:right;
width: 61%;
height: 250px;
margin-left:50px;
margin-right:50px;
margin-top:50px;
margin-bottom:50px;
}
#Statistics{
float:left;
width:25%;
height: 250px;
margin-left:50px;
margin-right:50px;
margin-top:50px;
margin-bottom:50px;
}
#heard{
margin-left:50px;
height: 15px;
}
.pagination{
float:right;
}
p{
font-size:15px;
color: whitesmoke;
}
span{
font-size:19px;
color: #ffce34;
}
</style>
---------------------