后台开发结合elementui组价
[图片上传中...(image.png-85fa34-1530951767258-0)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台</title>
<script src="vue.js"></script>
<script src="elementui/index.js"></script>
s<link rel="stylesheet" href="elementui/index.css">
<style>
*{
margin:0;
padding:0;
}
#box{
width: 100%;
position: absolute;
top:0;
bottom:0;
/*background-color: red;*/
min-width: 1200px;
}
.head{
width: 100%;
height:80px;
background-color: #009688;
position: relative;
}
.head h1{
width: 100%;
height:80px;
line-height: 80px;
text-align: center
}
.head p{
width: 60px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 30px;
background-color:#dedede;
position: absolute;
top:20px;
right: 10%;
border-radius: 10px;
}
.content{
position: absolute;
top:80px;
width: 100%;
bottom: 0;
overflow: hidden;
/*min-width: 1200px;*/
}
.nav{
width: 280px;
position: absolute;
top:0;
bottom: 0;
border-top:1px solid #dedede;
background-color: #009688;
overflow: hidden;
}
.nav li{
width: 240px;
height: 50px;
line-height: 50px;
padding-left: 40px;
margin-bottom:4px;
border-bottom:1px solid #dedede;
}
.center{
position: absolute;
top:20px;
bottom: 20px;
right: 20px;
left: 300px;
min-width:1000px;
background-color:#eee;
overflow: scroll;
}
.center input{
width: 300px;
height: 40px;
line-height: 40px;
position: absolute;
top:10px;
left:20px;
border-radius: 10px;
outline: 0;
border: 0;
text-indent: 20px;
font-size: 18px;
}
.center table{
position: absolute;
top:60px;
bottom: 20px;
width: 100%;
border-collapse: collapse;
}
.center table th{
height: 50px;
line-height: 50px;
background-color: #999;
}
.center table td{
text-align: center;
height: 40px;
line-height: 40px;
}
button{
width: 80px;
height: 30px;
line-height: 30px;
outline: 0;
border:0;
border-radius: 10px;
color: white;
}
.del{
background-color: red;
margin-left: 20px;
}
.up{
background-color:#009688;
}
.change{
position: absolute;
top:0;
bottom:0;
width: 100%;
background-color: rgba(0,0,12,0.5);
overflow: hidden;
}
.change .cen{
width: 280px;
height: 420px;
margin:0 auto;
margin-top: 200px;
background-color:#009688;
padding:20px 110px;
overflow: hidden;
}
.change .cen p{
margin-top: 20px;
height: 28px;
line-height: 28px;
}
.change .cen p .cl{
float: left;
width: 100px;
}
.change .cen p .cl2{
height: 25px;
line-height: 25px;
text-indent: 10px;
}
.change .cen p .cl3{
margin-left: 20px;
}
.change .cen .cl5{
height: 30px;
margin-top: 40px;
}
.change .cen p .btn{
width: 80px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
background-color: #eee;
margin-left: 45px;
}
.el-table{
position: absolute;
top:20px;
right: 20px;
left: 300px;
width:80%;
}
</style>
</head>
<body>
<div id="box">
<div class="head">
<h1>凤凰山班级同学统计</h1>
<p class="add" @click="open=true">+</p>
</div>
<div class="content">
<ul class="nav">
<li @click="change(0)" >班级个人信息</li>
<li @click="change(1)">考试成绩</li>
<li @click="change(2)">班委</li>
</ul>
<!-- <keep-alive> -->
<component :is="select" :open.sync="open" :arr.sync="sarr"></component>
<!-- </keep-alive> -->
</div>
<change :open.sync="open" :arr.sync="person" ></change>
</div>
</body>
<script>
//修改添加
Vue.component("change",{
props:["open","arr"],
data:function(){
return{
value2:false,
name:"请输入姓名",
phone:"请输入手机号",
qq:"请输入QQ号",
wei:"请输入微信号",
sex:"",
flag:false,
a:"",
}
},
template:`
<div class="change" v-show="open">
<div class="cen">
<p><span class="cl">姓名:</span><input type="text" v-model="name" class="cl2"></p>
<p><span class="cl">性别:</span><input type="radio" v-model="sex" name="sex" value="男"> 男<input type="radio" v-model="sex" name="sex" class="cl3" value="女"> 女
<p><span class="cl">是否婚配:</span><el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"></el-switch></p>
<p><span class="cl">手机号:</span><input type="text" v-model="phone" class="cl2"></p>
<p><span class="cl">QQ:</span><input type="text" v-model="qq" class="cl2"></p>
<p><span class="cl">微信:</span><input type="text" v-model="wei" class="cl2"></p>
<p class="cl5"><span class="btn" @click="add">确定</span><span class="btn" @click="close">取消</span></p>
</div>
</div>
`,
created:function(){
car.$on("update",function(item){
this.name=item.name;
this.phone=item.phone;
this.qq=item.qq;
this.wei=item.wei;
this.sex=item.sex;
if(item.marry=="否"){
this.value2=false;
}else{
this.value2=true;
}
this.flag=true;
for(var i=0;i<this.arr.length;i++){
if(this.arr[i].name==item.name){
this.a=i
}
}
}.bind(this))
},
methods:{
close:function(){
var flag=this.open;
flag=false;
this.$emit("update:open",flag)
},
add:function(){
var marry1;
if(this.value==false){
marry1="否"
}else{
marry1="是"
}
var arr=this.arr;
var obj={
name:this.name,
sex:this.sex,
marry:marry1,
phone:this.phone,
qq:this.phone,
wei:this.wei,
};
if(this.flag){
arr.splice(this.a,1,obj)
this.flag=false;
car.$emit("change",obj)
}else{
arr.push(obj);
car.$emit("add",obj)
}
this.$emit("update:arr",arr);
var flag=this.open;
flag=false;
this.$emit("update:open",flag)
}
}
})
//个人信息
Vue.component("s-person",{
props:["open","arr"],
data:function(){
return{
//控制滚动条的
cflag:false,
person:[],
}
},
created:function(){
this.person=this.arr;
car.$on("change",function(a){
if(this.person.length<2){
this.person=[];
this.person.push(a)
}else{
this.person=this.arr
}
}.bind(this))
car.$on("add",function(a){
this.person=this.arr
}.bind(this))
},
template:`
<div :class="{center:true,con:cflag}">
<input type="text" placeholder="请输入姓名查找" @change="change($event)">
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>是否婚配</th>
<th>手机号</th>
<th>QQ</th>
<th>微信</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in person">
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.marry}}</td>
<td>{{item.phone}}</td>
<td>{{item.qq}}</td>
<td>{{item.wei}}</td>
<td><button class="up" @click="update(item)">修改</button><button class="del" @click="del(item)" >删除</button></td>
</tr>
</table>
</div>
`,
methods:{
del:function(item){
var arr1=this.arr;
for(var i=0;i<arr1.length;i++){
if(arr1[i].name==item.name){
arr1.splice(i,1);
this.$emit("update:arr",arr1);
this.person=this.arr;
}
}
},
update:function(item){
var flag=this.open;
flag=true;
this.$emit("update:open",flag);
car.$emit("update",item);
},
change:function(e){
this.person=this.arr;
var name=e.target.value;
var arr1=this.arr.filter(function(val){
if(val.name==name){
return true
}
});
if(arr1.length==0){
alert("抱歉没有你要找的人")
}else{
this.person=arr1;
e.target.value=""
}
}
}
})
//成绩
Vue.component("s-grade",{
props:["arr"],
template:`
<el-table
:data="arr"
border
show-summary
>
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
sortable
label="第一次考试">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="第二次考试">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="第三次考试">
</el-table-column>
</el-table>
`,
})
//班委
Vue.component("s-class",{
props:["arr"],
template:`
<el-table
:data="arr"
height="250"
border
>
<el-table-column
prop="date"
label="班级"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="班委">
</el-table-column>
</el-table>
`
})
//控制修改的兄弟组件
var car=new Vue();
var box=new Vue({
el:"#box",
data:{
com:"",//组件的名字控制
select:"s-person",//动态组件的
sarr:[],//动态数据
person:[
{
name:"熊宝恒",
sex:"女",
marry:"否",
phone:"1254154565",
qq:"552547354",
wei:"545274574"
},{
name:"张小燕",
sex:"女",
marry:"否",
phone:"1254154565",
qq:"552547354",
wei:"545274574"
},{
name:"吕梦鑫",
sex:"男",
marry:"否",
phone:"1254154565",
qq:"552547354",
wei:"545274574"
},{
name:"王胜波",
sex:"男",
marry:"是",
phone:"1254154565",
qq:"552547354",
wei:"545274574"
},{
name:"李静",
sex:"女",
marry:"否",
phone:"1254154565",
qq:"552547354",
wei:"545274574"
},{
name:"毛洁",
sex:"女",
marry:"否",
phone:"1254154565",
qq:"552547354",
wei:"545274574"
},{
name:"牛佳琪",
sex:"女",
marry:"否",
phone:"1254154565",
qq:"552547354",
wei:"545274574"
}
],
open:false,
//成绩
grade: [{
id: "凤凰山",
name: '熊宝恒',
amount1: '70',
amount2: '80',
amount3: '85'
}, {
id: "凤凰山",
name: '张小燕',
amount1: '80',
amount2: '89',
amount3: '90'
}, {
id: "凤凰山",
name: '王胜波',
amount1: '90',
amount2: '86',
amount3: '87'
}, {
id: "凤凰山",
name: '吕梦鑫',
amount1: '80',
amount2: '95',
amount3: '98'
}, {
id: "凤凰山",
name: '李静',
amount1: '89',
amount2: '88',
amount3: '99'
}],
ban: [{
date: '凤凰山',
name: '王胜波',
address: '班长'
}, {
date: '凤凰山',
name: '王胜波',
address: '班长'
}, {
date: '凤凰山',
name: '王胜波',
address: '班长'
}, {
date: '凤凰山',
name: '王胜波',
address: '班长'
}, {
date: '凤凰山',
name: '王胜波',
address: '班长'
}, {
date: '凤凰山',
name: '王胜波',
address: '班长'
}, {
date: '凤凰山',
name: '王胜波',
address: '班长'
}]
},
created:function(){
this.sarr=this.person
},
methods:{
change:function(a){
if(a==0){
this.select="s-person"
this.sarr=this.person
}else if(a==1){
this.select="s-grade"
this.sarr=this.grade
}else{
this.select="s-class"
this.sarr=this.ban
}
}
}
})
</script>
</html>
