效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<style>
tr,
th {
width: 200px;
height: 40px;
border: 1px solid black;
}
table {
border-collapse: collapse;
}
.zi {
margin-left: 100px;
}
</style>
<body>
<div id="box">
<div class="container">
<input type="text" v-model="names" placeholder="输入名字">   
<input type="text" v-model="ages" placeholder="输入年龄">   
<input type="text" v-model="sexs" placeholder="输入性别">   
<button @click="addlist">添加用户信息</button>
<hr>
<input type="text" placeholder="搜索名字" v-model="zhi">   
<button @click="sou()">搜索</button>
<button @click="one">第一页</button>
<button @click="two">第二页</button>
<button @click="three">第三页</button>
<div style="display: flex; margin-top: 20px;">
<table>
<thead>
<tr style="color: red;">
<th>全选<input type="checkbox" v-model="quanxuan"></th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in listjia" :key="index">
<td><input type="checkbox" v-model="item.status" class="zi"></td>
<th>{{ item.name }}</th>
<th>{{ item.age }}</th>
<th>{{ item.sex }}</th>
<th><button @click="edit(index)">编辑</button>   <a href="#"
@click="del(index)">删除</a>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#box",
data: {
list: [
{ id: 1, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 2, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 3, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 4, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 5, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 6, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 7, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 8, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 9, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 10, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 11, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 12, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 13, name: "周杰伦", age: "58", sex: "男", status: false }
],
listjia: [
{ id: 1, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 2, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 3, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 4, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 5, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 6, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 7, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 8, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 9, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 10, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 11, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 12, name: "周杰伦", age: "58", sex: "男", status: false },
{ id: 13, name: "周杰伦", age: "58", sex: "男", status: false }
],
ids: 1,
names: "",
ages: "",
sexs: "",
index: 0,
zhi: '',
flag: true,
tiao: 0
},
created() {
this.listjia = this.list.slice(0, 5);
},
methods: {
//第一个按钮显示前5条数据
one() {
this.listjia = this.list.slice(0, 5);
},
//第一个按钮6-10
two() {
this.listjia = this.list.slice(5, 10);
},
//第一个按钮10-15
three() {
this.listjia = this.list.slice(10, 15);
},
//增加或编辑
addlist() {
if (this.flag) {
this.ids++
this.list.push({ id: this.ids, name: this.names, age: this.ages, sex: this.sexs });
this.listjia.push({ id: this.ids, name: this.names, age: this.ages, sex: this.sexs, status: false });
}
else {
console.log(1);
this.listjia[this.index].name = this.names
this.listjia[this.index].age = this.ages
this.listjia[this.index].sex = this.sexs
this.flag = true;
}
},
//删除
del(index) {
this.list.splice(index, 1)
this.listjia.splice(index, 1)
this.ids--
},
//搜索
sou() {
this.listjia = this.list.filter(item => {
return item.name.indexOf(this.zhi) > -1
})
},
//编辑
edit(index) {
this.index = index;
this.flag = false;
this.names = this.list[index].name;
this.ages = this.list[index].age;
this.sexs = this.list[index].sex;
}
},
computed: {
quanxuan: {
get() {
// this.listjia.forEach(item => {
return this.listjia.every((item) => item.status)
// });
},
set(val) {
console.log(val);
return this.listjia.forEach((item) => item.status = val)
}
}
},
})
</script>
</html>因篇幅问题不能全部显示，请点此查看更多更全内容