代码：
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<style>
.warp{
width: 900px;
padding: 20px;
margin: 0 auto;
}
.gridtable{
float: left;
}
table{
margin-top: 5px;
background-color: #fff;
border: 1px solid #ccc;
border-collapse: collapse;
}
table th {
background-color: #dedede;
}
table tr td,
table tr th {
border: 1px solid #ccc;
padding: 8px;
}
table.gridtable tbody:nth-child(odd){
background-color: #dedede;
}
table.gridtable tbody:hover{
background-color: #ccc;
}
.form-operate{
float: left;
margin-top: 20px;
padding-left: 30px;
}
.form-operate input{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="warp" id="app">
<div class="gridtable">
<table>
<thead>
<tr>
<th><input type="checkbox" v-model="allcheck" @change="checkAll"/>全选</th>
<template v-for="(item,index) in columns">
<th @click="sort(item.filed)">{{item.title}}</th>
</template>
<th>操作</th>
</tr>
</thead>
<tbody v-for="(col,index) in datas" :key="index">
<tr>
<td><input type="checkbox" v-model="checkItem[index]"/>{{index+1}}</td>
<template v-for="(item,index) in columns">
<td>{{col[item.filed]}}</th>
</template>
<td>
<button @click="edit(index)">编辑</button>
<button @click="deleted(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-operate">
<label for="name">姓名：
<input id="name" type="text" v-model.trim="form.name">
</label>
<br/>
<label for="age">年龄：
<input id="age" type="text" v-model.trim="form.age">
</label>
<br/>
<label for="gender">性别：
<input id="gender" type="text" v-model.trim="form.gender">
</label>
<br/>
<label for="hobby">爱好：
<input id="hobby" type="text" v-model.trim="form.hobby">
</label>
<br/>
<button @click="save">保存</button>
<button @click="add">新增</button>
</div>
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
<script type="text/javascript" src="./index.js"></script>
</html>js部分
new Vue({
el:'#app',
data() {
return {
allcheck: false,
search: '',
checkItem:[],
columns: [
{
title: '姓名',
filed: 'name'
}, {
title: '年龄',
filed: 'age'
}, {
title: '性别',
filed: 'gender'
}, {
title: '爱好',
filed: 'hobby'
}
],
form:{
id: '',
name: '',
age: '',
gender: '',
hobby: ''
},
datas: [
{
id: '1',
name: '小花',
age: '15',
gender: 'woman',
hobby: 'coding'
}, {
id: '2',
name: '小军',
age: '18',
gender: 'man',
hobby: 'sleeping'
}, {
id: '3',
name: '小坤',
age: '8',
gender: 'man',
hobby: 'shopping'
}, {
id: '4',
name: '小新',
age: '28',
gender: 'woman',
hobby: 'singing'
}
]
}
},
watch:{
checkItem: {
handler(val) {
const hasfalse = this.checkItem.includes(false);
if(hasfalse) {
this.allcheck = false;
}else{
this.allcheck = true;
}
},
deep: true
},
datas: {
handler(val) {
return val
},
deep: true
}
},
methods: {
edit(param) {
const form = this.datas[param];
this.form = Object.assign({},this.form,form);
},
deleted(param) {
this.checkItem.splice(param,1);
this.datas.splice(param,1);
},
save() {
let result = window.confirm('您确定要保存修改吗？');
if(result) {
let id = this.form.id;
let index = this.datas.findIndex(item => {return item.id == id});
const newitem = Object.assign({},this.form);
this.datas.splice(index,1,newitem);
}else {
return
}
},
checkAll() {
if(this.allcheck) {
this.checkItem = this.datas.map(item => {
return true;
})
}else{
this.checkItem = this.datas.map(item => {
return false;
})
}
},
sort(param) {
this.datas.sort(function (obj1, obj2) {
if (obj1[param] > obj2[param]) {
return 1;
} else if (obj1[param] === obj2[param]) {
return 0;
} else {
return -1;
}
}
)
},
add() {
let ids = this.datas.map( item => {
return item.id;
})
let idmax = Math.max(ids);
this.form.id = ++idmax;
this.allcheck = false;
this.datas.push(this.form);
this.checkItem.push(false);
}
},
created() {
this.$nextTick(() => {
this.checkItem = this.datas.map( item => {
return false;
})
})
}
});