前端vue代码已经写好了，然后增删查的功能都有，如何增加一个修改信息数据的功能？请指导代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="./lib/vue.js"></script>
<style>
.course{
width: 1200px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 5px;
}
.course .editPanel{
border-bottom: 1px solid #ccc;
padding: 20px;
}
.course .editPanel label{
margin-right: 20px;
}
.course .editPanel input{
width: 150px;
padding: 5px 10px;
font-size: 14px;
border-radius: 4px;
outline: none;
border: 1px solid #aaa;
}
.course .editPanel input[type=button]{
width: 70px;
background-color: rgb(50,120,180);
padding: 5px 20px;
letter-spacing: 5px;
color: #eee;
}
.course .editPanel .search{
margin-left: 50px;
}
.course .list{
padding: 20px;
}
.course .list table{
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
}
.course .list table tr td,.course .list table tr th{
padding: 10px;
border: 1px solid #ccc;
text-align: center;
font-size: 14px;
line-height: 14px;
}
.course .list table tr td a{
color: #369;
text-decoration: none;
}
.course .list table .firstCol{
width: 50px;
}
</style>
<script src="../day07/js/vue.js"></script>
<script src="../day08/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../day08/element-ui/lib/theme-chalk/index.css">
<script src="js/cookie.js"></script>
</head>
<body>
<div id="div">
<section class="publicMian ">
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>供应商管理页面</span>
</div>
<div class="course" id="course">
<div class="editPanel">
<label for="">编号：<input type="text" v-model="id"></label>
<label for="">名称：<input type="text" v-model="cName"></label>
<label for="">联系人：<input type="text" v-model="person" @keyup.enter="add"></label>
<el-button type="success" plain @click="add">添加</el-button>
<!--<a href="providerAdd.html">添加</a>-->
<lable for="" class="search" style="font-size: 17px"><div class="el-icon-search" style="margin-right: auto">搜索：<input type="text" v-model="keyword" @keyup="search(keyword)"></lable>
</div>
</div>
<div class="list">
<table>
<thread>
<tr>
<th class="firstCol">编号</th>
<th>名称</th>
<th>联系人</th>
<th>时间</th>
<th>操作</th>
</tr>
</thread>
<tbody>
<tr v-for="item in search(keyword)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.cName}}</td>
<td>{{item.person}}</td>
<td><i class="el-icon-time"></i>{{item.time | timeFormat('cn')}}</td>
<td><a href="" @click.prevent="del(item.id)"><el-button type="danger" icon="el-icon-delete" circle></el-button></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
</body>
<script>
var providers = JSON.parse(window.localStorage.getItem('provider1')) || [];//从localStorage获取，没有值默认空数组
var vm = new Vue({
el: '#course',
data: {
id: '',
cName: '',
person: '',
time: new Date(),
keyword: '',
list: providers //设置为从localStorage获取到的数据
},
methods: {
// 增加一条记录
add: function () {
if (this.id.length > 0 && this.cName.length > 0 && this.person.length > 0) { //确保都有数据
if (this.list.findIndex(i => i.id == this.id) != -1) {
alert('编号' + this.id + '已经存在，请确认！');
return false;
}//增加唯一判断
this.list.push({ 'id': this.id, 'cName': this.cName, 'person': this.person, 'time': this.time })
} else {
alert('请填入完整的信息！');
}
localStorage.setItem('provider1', JSON.stringify(this.list));//添加后更新localStorage
},
// 删除一条记录
del: function (id) { // 根据id删除数据
for (var i = 0; i < this.list.length; i++) {
if (this.list[i].id == id) {
this.list.splice(i, 1); //从索引为i的位置开始删除，删1个
}
}
localStorage.setItem('provider1', JSON.stringify(this.list));//添加后更新localStorage
},
search: function (word) {
var result = [];
for (var i = 0; i < this.list.length; i++) {
if (this.list[i].cName.toLowerCase().indexOf(word.toLowerCase()) > -1) { //toLowerCase()方法用于把字符串转换为小写
result.push(this.list[i]);
}
}
return result;
},
},
filters: {
timeFormat: function (dateStr, pattern) {
var date = new Date(dateStr);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var result = '';
if (pattern) {
switch (pattern.toLowerCase()) {
case 'cn':
result = year + '年' + month + '月' + day + '日';
break;
case 'en':
result = year + '-' + month + '-' + day;
break;
default:
result = year + '.' + month + '.' + day;
break;
}
} else {
result = year + '.' + month + '.' + day;
}
return result;
}
}
});
</script>
</html>
刚写好你就提问了。。。。data增加一个updateIndex什么的记录住修改元素的下标，更新就行了，样式你自己修改下，有帮助请点个采纳，谢谢~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="./lib/vue.js"></script>
<style>
.course {
width: 1200px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 5px;
}
.course .editPanel {
border-bottom: 1px solid #ccc;
padding: 20px;
}
.course .editPanel label {
margin-right: 20px;
}
.course .editPanel input {
width: 150px;
padding: 5px 10px;
font-size: 14px;
border-radius: 4px;
outline: none;
border: 1px solid #aaa;
}
.course .editPanel input[type=button] {
width: 70px;
background-color: rgb(50,120,180);
padding: 5px 20px;
letter-spacing: 5px;
color: #eee;
}
.course .editPanel .search {
margin-left: 50px;
}
.course .list {
padding: 20px;
}
.course .list table {
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
}
.course .list table tr td, .course .list table tr th {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
font-size: 14px;
line-height: 14px;
}
.course .list table tr td a {
color: #369;
text-decoration: none;
}
.course .list table .firstCol {
width: 50px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../day08/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../day08/element-ui/lib/theme-chalk/index.css">
<script src="js/cookie.js"></script>
</head>
<body>
<div id="div">
<section class="publicMian ">
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>供应商管理页面</span>
</div>
<div class="course" id="course">
<div class="editPanel">
<label for="">编号：<input type="text" v-model="id"></label>
<label for="">名称：<input type="text" v-model="cName"></label>
<label for="">联系人：<input type="text" v-model="person" @keyup.enter="add"></label>
<el-button type="success" plain @click="add">{{updateIndex!=-1?'修改':'添加'}}</el-button>
<el-button type="success" plain @click="cancel" v-bind:style="{display:updateIndex!=-1?'':'none'}">取消</el-button>
<!--<a href="providerAdd.html">添加</a>-->
<lable for="" class="search" style="font-size: 17px"><div class="el-icon-search" style="margin-right: auto">搜索：<input type="text" v-model="keyword" @keyup="search(keyword)"></lable>
</div>
</div>
<div class="list">
<table>
<thread>
<tr>
<th class="firstCol">编号</th>
<th>名称</th>
<th>联系人</th>
<th>时间</th>
<th>操作</th>
</tr>
</thread>
<tbody>
<tr v-for="item in search(keyword)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.cName}}</td>
<td>{{item.person}}</td>
<td><i class="el-icon-time"></i>{{item.time | timeFormat('cn')}}</td>
<td>
<a href="" @click.prevent="del(item.id)"><el-button type="danger" icon="el-icon-delete" circle></el-button>删除</a>
<a href="" @click.prevent="update(item.id)"><el-button type="danger" icon="el-icon-delete" circle></el-button>修改</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
</body>
<script>
var providers = JSON.parse(window.localStorage.getItem('provider1')) || [];//从localStorage获取，没有值默认空数组
var vm = new Vue({
el: '#course',
data: {
id: '',
cName: '',
person: '',
time: new Date(),
updateIndex:-1,
keyword: '',
list: providers///////////////设置为从localStorage获取到的数据
/* [
{ 'id': 1, 'cName': '牛耳', 'person': '小明', 'time': '2020-1-3' },
{ 'id': 2, 'cName': '民政', 'person': '小红', 'time': '2020-2-3' },
{ 'id': 3, 'cName': '等等', 'person': '小华', 'time': '2020-3-3' }
]*/
},
methods: {
// 增加一条记录
add: function () {
if (this.id.length > 0 && this.cName.length > 0 && this.person.length > 0) { //确保都有数据
if (this.list.filter(i => i.id == this.id).length > (this.updateIndex!=-1 ? 2 : 1)) { alert('编号' + this.id + '已经存在，请确认！'); return false; }//增加唯一判断
if (this.updateIndex != -1) {
var item = this.list[this.updateIndex]
item.id = this.id;
item.cName = this.cName;
item.person = this.person;
}
else {
this.list.push({ 'id': this.id, 'cName': this.cName, 'person': this.person, 'time': this.time });
}
this.updateIndex = -1;
this.id = this.cName = this.person = '';
} else {
alert('请填入完整的信息！');
}
localStorage.setItem('provider1', JSON.stringify(this.list));//添加后更新localStorage
},
// 删除一条记录
del: function (id) { // 根据id删除数据
for (var i = 0; i < this.list.length; i++) {
if (this.list[i].id == id) {
this.list.splice(i, 1); //从索引为i的位置开始删除，删1个
}
}
localStorage.setItem('provider1', JSON.stringify(this.list));//添加后更新localStorage
},
update: function (id) {
this.updateIndex = this.list.findIndex(i => i.id == id);
var item = this.list[this.updateIndex];
this.id = item.id;
this.cName = item.cName;
this.person = item.person;
},
cancel: function () { this.id = this.cName = this.person = ''; this.updateIndex = -1; },
search: function (word) {
var result = [];
for (var i = 0; i < this.list.length; i++) {
if (this.list[i].cName.toLowerCase().indexOf(word.toLowerCase()) > -1) { //toLowerCase()方法用于把字符串转换为小写
result.push(this.list[i]);
}
}
return result;
},
},
filters: {
timeFormat: function (dateStr, pattern) {
var date = new Date(dateStr);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var result = '';
if (pattern) {
switch (pattern.toLowerCase()) {
case 'cn':
result = year + '年' + month + '月' + day + '日';
break;
case 'en':
result = year + '-' + month + '-' + day;
break;
default:
result = year + '.' + month + '.' + day;
break;
}
} else {
result = year + '.' + month + '.' + day;
}
return result;
}
}
});
</script>
</html>
编辑，不就是删除和新增的结合吗，你先根据编辑的id删除已有的数据，新数据保存即可。