Vue实战（04）：利用事件参数传递实现删除功能

喜欢ヅ旅行 2022-11-16 01:49 153阅读 0赞

## 一、前言 ##

上回书说到我们实现了一个table，里面装了一堆data，具体的样貌大概是这样子滴：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Mzk2NzYz_size_16_color_FFFFFF_t_70]  
那么这一次呢，我们给它加一个删除按钮，点击删除按钮实现删除对应行的功能。话不多说开始操作吧！

## 二、添加button ##

首先我们加入一个删除按钮，没啥特别功能的那种：

<!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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Mzk2NzYz_size_16_color_FFFFFF_t_70 1]

## 三、定义删除方法 ##

接下来我们定义一个删除方法。只改了`<script>`标签中的内容，加了个function：

这样其实还没有真正实现删除的功能，但是可以实现一个打印，让我们在执行delete方法的时候，打印出来对应的id，用于调试。

## 四、绑定function ##

接下来我们在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>
                    
                    <button @click="del(item.id)">删除</button>
                </td>
    </tr>

于是我们现在打开F12，每次点击删除按钮，就会在F12的console中看到一条记录：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Mzk2NzYz_size_16_color_FFFFFF_t_70 2]

## 五、实现删除功能 ##

这里我们使用过滤器来实现，将不需要被删除的数据过滤出来：

methods: {
                del: function (id) {
                    /* 控制台打印删除的数据对应的id */
                    console.log("删除一条数据", id)
                    /* 从list中过滤掉对应的数据 */
                    this.mess = this.mess.filter(function (item, index) {
                        return item.id != id
                    })
                }
            }

\-Over-

软件测试工程师一只，也在不断的学习阶段，平时的小经验不定期分享。
    博主经验有限，若有不足，欢迎交流，共同改进~
    有意可加Q群 908417285 交流学习。
    乾坤未定，你我皆是黑马

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Mzk2NzYz_size_16_color_FFFFFF_t_70]: /images/20221022/ab7b8fa644c94094bf5d0b15a6735510.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Mzk2NzYz_size_16_color_FFFFFF_t_70 1]: /images/20221022/2f2645f5581d46c3811cb2791033b0f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Mzk2NzYz_size_16_color_FFFFFF_t_70 2]: /images/20221022/76848c0c67b34f079123e267de6e9922.png