添加
修改
搜索
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/**全屏样式*/
table {
border: 1px solid #ccc;
padding: 0;
border-collapse: collapse;
table-layout: fixed;
margin-top: 10px;
width: 100%;
}
table td,
table th {
height: 30px;
border: 1px solid #ccc;
background: #fff;
font-size: 15px;
padding: 3px 3px 3px 8px;
}
table th:first-child {
width: 30px;
}
.container,
.st {
width: 1000px;
margin: 10px auto 0;
font-size: 13px;
font-family: 'Microsoft YaHei'
}
.container .search {
font-size: 15px;
padding: 4px;
}
.container .add {
padding: 5px 15px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 6;
background: rgba(0, 0, 0, 0.5);
}
.overlay td:first-child {
width: 66px;
}
.overlay .con {
position: absolute;
width: 420px;
min-height: 300px;
background: #fff;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
/*margin-top: -150px;*/
padding: 20px;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button @click="add">新增</button>
<hr />
搜索：<input type="text" @input="search" placeholder="请输入要搜索的名字" v-model="msg"/>
<hr />
<table border="1" cellspacing="0" cellpadding="0" width="80%">
<tr>
<th>id</th>
<th>用户名</th>
<th>邮箱</th>
<th>性别</th>
<th>省份</th>
<th>爱好</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in sList">
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.email}}</td>
<td>{{item.sex}}</td>
<td>{{item.province}}</td>
<td>{{item.hobby.join(' | ')}}</td>
<td>
<a href="#" @click="toupdate(item.id)">修改</a> |
<a href="#" @click="del(item.id,index)">删除</a>
</td>
</tr>
</table>
<div><span id="" v-for="i in totalPage.length"><a href="#" @click="current(i)">{{i}}</a></span></div>
<div>
<a href="#" @click="current(0)">首页</a>
<a href="#" @click="prePage">上一页</a>
<a href="#" @click="nextPage">下一页</a>
<a href="#" @click="current(totalPage.length)">首页</a>
</div>
<model v-show="isShow" @modify="modify" @exit="exit" :selectedlist="selectedlist"></model>
</div>
<script type="text/javascript">
Vue.component('model', {
props:['selectedlist'],
template: `<div class="overlay">
<div class="con">
<h2 class="title">{{selectedlist.msg}}</h2>
<div class="content">
<table>
<tr>
<td>用户名</td>
<td><input type="text" v-model="selectedlist.username"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" v-model="selectedlist.email"></td>
</tr>
<tr>
<td>性别</td>
<td>
<label><input type="radio" v-model="selectedlist.sex" name="sex" value="男" >男</label>
<label><input type="radio" v-model="selectedlist.sex" name="sex" value="女" >女</label>
<label><input type="radio" v-model="selectedlist.sex" name="sex" value="未知">未知</label>
</td>
</tr>
<tr>
<td>省份</td>
<td>
<select name="" id="" v-model="selectedlist.province">
<option value="北京市">北京市</option>
<option value="河北省">河北省</option>
<option value="河南省">河南省</option>
<option value="重庆市">重庆市</option>
<option value="广东省">广东省</option>
<option value="辽宁省">辽宁省</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<label><input type="checkbox" v-model="selectedlist.hobby" value="篮球">篮球</label>
<label><input type="checkbox" v-model="selectedlist.hobby" value="读书">读书</label>
<label><input type="checkbox" v-model="selectedlist.hobby" value="插画">插画</label>
<label><input type="checkbox" v-model="selectedlist.hobby" value="编程">编程</label>
<label><input type="checkbox" v-model="selectedlist.hobby" value="弹琴">弹琴</label>
</td>
</tr>
</table>
<p>
<input type="button" @click="$emit('exit')" value="取消">
<input type="button" value="保存" @click="$emit('modify',selectedlist)">
</p>
</div>
</div>
</div>`
});
var vm = new Vue({
el:'#app',
created(){
//console.log("create");
//this.searchList = this.list;
this.setSlist(this.list);
},
methods:{
setSlist:function(arr){
// 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
this.pageNum = Math.ceil(arr.length / this.pageSize) || 1;
for (let i = 0; i < this.pageNum; i++) {
// 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
// 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
this.totalPage[i] = arr.slice(this.pageSize * i, this.pageSize * (i + 1))
}
// 获取到数据后显示第一页内容
this.dataShow = this.totalPage[this.currentPage];
//JSON
this.sList=JSON.parse(JSON.stringify(this.dataShow));
},
// 上一页和下一页
// 下一页
nextPage() {
if (this.currentPage === this.pageNum - 1) return ;
this.dataShow = this.totalPage[++this.currentPage];
this.sList=JSON.parse(JSON.stringify(this.dataShow));
},
// 上一页
prePage() {
if (this.currentPage === 0) return ;
this.dataShow = this.totalPage[--this.currentPage];
this.sList=JSON.parse(JSON.stringify(this.dataShow));
},
current(i){
console.log(i);
this.dataShow = this.totalPage[i-1];
this.sList=JSON.parse(JSON.stringify(this.dataShow));
}
,
del:function(id,i){
//根据id找对应的记录
var index = this.list.findIndex(item => {
return item.id == id;
});
console.log("index---:"+index);
if(confirm("你确定要删除吗？")){
this.list.splice(index,1);
//this.searchList.splice(i,1);
}
//this.setSlist(this.list);
this.search();
},
exit:function(){
this.isShow=false;
},
add:function(){
//清空所有数据
this.selectedlist = {
username: '',
email: '',
sex: '男',
province: '北京市',
hobby: [],
msg:'新增'//新增 | 修改
};
this.isShow = true;
},
toupdate:function(id){
//回显示
var index = this.list.findIndex(item => {
return item.id == id;
});
this.selectedIndex = index;
this.selectedlist= this.list[index];
this.selectedlist.msg="修改";
this.isShow = true;
}
,
modify:function(item){
//console.log(item);
//判断是添加还是修改
if(this.selectedIndex==-1){
//添加功能
this.list.push(item);
}else{
//替换指定位置的数据
Vue.set(this.list,this.selectedIndex,item);
}
//刷新
//this.searchList = this.list;
//关掉
this.isShow = false;
this.setSlist(this.list);
},
search:function(e){
var ss =[];
//获取文本框的值
//var name = e.target.value;
var name = this.msg;
//console.log(name);
//找出集合中带有name的记录
this.list.forEach(function(item){
if(item.username.indexOf(name)!=-1){
ss.push(item);
}
});
console.log(ss);
//this.list = ss;//不可以这样
//this.searchList = ss;
console.log(''+this.searchList);
this.setSlist(ss);
}
},
data:{
// 所有页面的数据
totalPage: [],
// 每页显示数量
pageSize: 5,
// 共几页
pageNum: 1,
// 当前显示的数据
dataShow: "",
// 默认当前显示第一页
currentPage: 0,
msg:'',
sList:[],
isShow:false,
selectedlist: {},
searchList:[],
selectedIndex:-1,
list: [
{
id:1001,
username: 'aaaaa',
email: '123@qq.com',
sex: '男',
province: '北京市',
hobby: ['篮球', '读书', '编程']
},
{
id:1005,
username: 'bbbbb',
email: 'bbbbbbb@163.com',
sex: '女',
province: '河北省',
hobby: ['弹琴', '读书', '插画']
},
{
id:1004,
username: 'aaabb',
email: 'abababab@qq.com',
sex: '女',
province: '重庆市',
hobby: ['篮球']
},
{
id:1003,
username: 'cccccc',
email: '123@qq.com',
sex: '男',
province: '北京市',
hobby: ['篮球', '读书', '编程']
},
{
id:1008,
username: 'dddddd',
email: 'bbbbbbb@163.com',
sex: '女',
province: '河北省',
hobby: ['弹琴', '读书', '插画']
},
{
id:1002,
username: 'eeeee',
email: 'abababab@qq.com',
sex: '女',
province: '重庆市',
hobby: ['篮球']
},
{
id:1010,
username: 'dddddd',
email: 'bbbbbbb@163.com',
sex: '女',
province: '河北省',
hobby: ['弹琴', '读书', '插画']
},
{
id:1009,
username: 'eeeee',
email: 'abababab@qq.com',
sex: '女',
province: '重庆市',
hobby: ['篮球']
}
]
}
})
</script>
</body>
</html>
9804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
