赞
踩
上回书说到我们实现了一个table,里面装了一堆data,具体的样貌大概是这样子滴:
那么这一次呢,我们给它加一个删除按钮,点击删除按钮实现删除对应行的功能。话不多说开始操作吧!
首先我们加入一个删除按钮,没啥特别功能的那种:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件参数传递,实现数据删除功能</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> #th1, #th2, #th3, #th4, #th5, #th6, #th7, #th8, #th9 { background: chartreuse; } </style> </head> <body> <div id="app"> <table border="" cellpadding="" cellspacing=""> <tr> <th id="th1">ID</th> <th id="th2">接口名</th> <th id="th3">测试人员</th> <th id="th4">项目名</th> <th id="th5">项目ID</th> <th id="th6">描述信息</th> <th id="th7">创建时间</th> <th id="th8">用例数</th> <th id="th9">操作</th> </tr> <tr v-for="item in mess"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.tester}}</td> <td>{{item.project}}</td> <td>{{item.project_id}}</td> <td>{{item.desc}}</td> <td>{{item.create_time}}</td> <td>{{item.testcases}}</td> <td> <button>删除</button> </td> </tr> </table> </div> <script type="text/javascript"> var vue = new Vue({ el: "#app", data: { mess: [ { "id": 1, "name": "登录接口", "tester": "雷雷", "project": "自动化测试平台项目", "project_id": 1, "desc": "登录接口", "create_time": "2019-11-06 14:50:30", "testcases": 9, }, { "id": 2, "name": "注册接口", "tester": "霆霆", "project": "自动化测试平台项目", "project_id": 1, "desc": "自动化测试平台项目, 注册接口", "create_time": "2020-11-06 12:12:12", "testcases": 0, }, { "id": 3, "name": "创建项目接口", "tester": "嘎嘎", "project": "自动化测试平台项目", "project_id": 1, "desc": "这是自动化测试平台创建项目接口", "create_time": "2020-11-06 13:13:13", "testcases": 1, }, { "id": 4, "name": "贷款接口", "tester": "巴巴", "project": "农业银行项目", "project_id": 2, "desc": "", "create_time": "2021-10-10 14:44:44", "testcases": 0, }, { "id": 5, "name": "退出登录接口", "tester": "哈哈", "project": "农业银行项目", "project_id": 2, "desc": "", "create_time": "2021-11-11 15:55:55", "testcases": 0, }, { "id": 6, "name": "个人信息查看接口", "tester": "了了", "project": "农业银行项目", "project_id": 2, "desc": "", "create_time": "2012-12-12 15:55:50", "testcases": 1, }, ], } }) </script> </body> </html>
接下来我们定义一个删除方法。只改了<script>
标签中的内容,加了个function:
<script type="text/javascript"> var vue = new Vue({ el: "#app", data: { mess: [ { "id": 1, "name": "登录接口", "tester": "雷雷", "project": "自动化测试平台项目", "project_id": 1, "desc": "登录接口", "create_time": "2019-11-06 14:50:30", "testcases": 9, }, { "id": 2, "name": "注册接口", "tester": "霆霆", "project": "自动化测试平台项目", "project_id": 1, "desc": "自动化测试平台项目, 注册接口", "create_time": "2020-11-06 12:12:12", "testcases": 0, }, …… ], }, methods: { del: function (id) { /* 传入的参数为item中的id */ console.log("删除一条数据",id) } } }) </script>
这样其实还没有真正实现删除的功能,但是可以实现一个打印,让我们在执行delete方法的时候,打印出来对应的id,用于调试。
接下来我们在button按钮上实现方法的绑定:
<tr v-for="item in mess">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.tester}}</td>
<td>{{item.project}}</td>
<td>{{item.project_id}}</td>
<td>{{item.desc}}</td>
<td>{{item.create_time}}</td>
<td>{{item.testcases}}</td>
<td>
<!--要注意这里不能将方法取名为delete,否则不会生效,因为是内置关键字-->
<button @click="del(item.id)">删除</button>
</td>
</tr>
于是我们现在打开F12,每次点击删除按钮,就会在F12的console中看到一条记录:
这里我们使用过滤器来实现,将不需要被删除的数据过滤出来:
methods: {
del: function (id) {
/* 控制台打印删除的数据对应的id */
console.log("删除一条数据", id)
/* 从list中过滤掉对应的数据 */
this.mess = this.mess.filter(function (item, index) {
return item.id != id
})
}
}
-Over-
软件测试工程师一只,也在不断的学习阶段,平时的小经验不定期分享。
博主经验有限,若有不足,欢迎交流,共同改进~
有意可加Q群 908417285 交流学习。
乾坤未定,你我皆是黑马
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。