Vue详解（二）表格增删搜索

最新推荐文章于 2024-04-09 18:30:52 发布

小高写BUG

最新推荐文章于 2024-04-09 18:30:52 发布

阅读量286

点赞数 1

分类专栏： Vue前端框架文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/gao1213977085/article/details/121880038

版权

Vue前端框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue详解（二）表格增删搜索

完成一个基本信息系统（学生信息管理系统）的列表操作，可对该列表进行添加操作，可进行删除操作。

请添加图片描述

实现搜索
添加和删除

 <!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>
  <!-- 引入vuejs框架 -->
  <script src="./lib/vue.js"></script>
  <style>
    .hFontColor{
      color:brown;
    }
    .hAlign{
      text-align:center
    }
    td{
      text-align:center
    }
  </style>

</head>

<body>

  <div id="app">
    <!-- 
      模拟表结构：
        student
        id：编号
        name：姓名
        gender：性别
        age：年龄

     -->
    <!--
      基础建设： 
        搭建用来填写信息的文本框，
        搭建表格结构
        搭建添加信息按钮、删除信息的按钮
        搭建一些基础的样式。 
    -->

    <!-- 
      vuejs建设：
        data:模型
            对象集合，编号，姓名，性别，年龄
        methods:
            添加方法，删除方法。
            拓展：查询信息列表的方法

     -->

     <h3 :class="hstyle">学生信息管理系统</h3>
     <hr width="100%">
     <br>
     <!-- 搭建添加操作 相关信息 -->
     编号：<input type="text" v-model="id"/>&nbsp;&nbsp; <!-- A0001-->
     姓名：<input type="text" v-model="name"/>&nbsp;&nbsp;
     性别：<input type="text" v-model="gender"/>&nbsp;&nbsp;
     年龄：<input type="text" v-model="age"/>&nbsp;&nbsp;

     <input type="button" value="保存学员" @click="save"/>

     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <!-- 

      搜索的方式，可以触发按钮进行搜索，也可以通过如下方式，在触发敲键盘之后，触发搜索方法

      -->
     <input type="text" v-model="sname" @keyup="search"/>

     <!-- <input type="button" value="搜索学员" @click="search"> -->

     <br>
     <br>

     <!-- 搭建表格工作区 -->
     <table border="1" width="100%" align="center" cellpadding="6px" cellspaceing="0px">
       <tr>
         <td>序号</td><!--1 2 3 4 5...-->
         <td>编号</td>
         <td>姓名</td>
         <td>性别</td>
         <td>年龄</td>
       </tr>
       <!-- 内容部分 读取模型sList中的数据 使用 v-for 的形式对sList做遍历 -->
       <!-- 
         每一个s,就是每一个遍历出来的学生对象，将来在取得学生信息的时候，通过{{s.属性}}来取值
         i变量是遍历出来的下标，从0开始做标记，在序号中，应该是以下标+1的方式开始标记（序号从以开始计数）
        -->
       <tr v-for="(s, i) in sList" :key="s.id">
         <!--  :key="s.id" 是为了多项选择做的准备工作
                数据顺序一旦发生改变，选中项就会出现Bug！ 
        -->

        <td>{{i+1}}</td>
        <td>{{s.id}}</td>
        <td>{{s.name}}</td>
        <td>{{s.gender}}</td>
        <td>{{s.age}}</td>
   
        
        <!-- 
          使用 href="javascript:void(0)" 将超链接的href行为禁用掉，该超链接只能以绑定事件的形式来触发行为。
          click的prevent的用处是一样的
         -->
        <td>
          <!-- 
            根据编号执行删除操作

            注意：
              在方法中传递参数，不需要使用差值表达式
              使用方式：del(s.id)
              而不是 ：del({{s.id}})
           -->
          <a href="javascript:void(0)" @click="del(s.id)">删除学员</a>
        </td>

       </tr>

     </table>
  </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          sList:[
            {id:"A0001",name:"zs",gender:"男",age:"23"},
            {id:"A0002",name:"ls",gender:"男",age:"24"},
            {id:"A0003",name:"WW",gender:"男",age:"25"}
          ],
          searchList:[
            {id:"A0001",name:"zs",gender:"男",age:"23"},
            {id:"A0002",name:"ls",gender:"男",age:"24"},
            {id:"A0003",name:"WW",gender:"男",age:"25"}
          ],
          id:"",
          name:"",
          gender:"",
          age:"",
          hstyle:{hFontColor:true,hAlign:true},

          sname:""
        },
        methods: {
          save(){
            /**
             *  通过在页面中对文本框进行信息的完善（对视图v进行数据的填充）
             *  根据使用对于视图中值的绑定方式是 v-model 的方式，会实现双向数据绑定
             * 通过对视图的数据的填充，同时也是对模型中数据的填充
             * 在我们触发的save方法中，取得模型中的值，就相当于是取得了在页面文本框中填充的数据
             * 将这些数据收集起来，形成一个对象，将该对象添加到我们的sList对象数据中就可以了。
            */
           var s = {id:this.id,name:this.name,gender:this.gender,age:this.age};

           this.sList.push(s)
          },

          del(id){
            // id:需要删除记录的id,根据id来进行删除
            alert(id);
            /**
             * 遍历slist中所以的对象
             * 从每一个对象中取得id信息，将每一个id与参数id进行比较
             * 如果id值相等，证明我们找到了需要删除的记录
             * 将该记录从sList中移除掉
             * 
            */

            for(var i = 0;i<this.sList.length;i++){

              // 如果id值相等，证明我们找到了需要删除的记录
              if(this.sList[i].id==id){

                // 将该记录从sList中移除掉
                this.sList.splice(i,1);
              }
            }
          },

          search(){

            /**
             * 将sList备份searchlist
             * 将sList清空掉（等待搜索出来的对象，对sList进行重新的装配过程）
             * 
             * 遍历searchlist ，取得每一个对象，根据对象取得名字
             * 
             * 如果名字中包含输入的关键字,则证明该对象已经搜索到了，将该对象装配到sList中
             * 最终展现的信息是最新经过索索后的sList
             * 
             * 注意：
             *    一定要先将sList进行备份，使用其他的对象数组是不能够展现信息的，
             *    因为v-for循环当中已经写好了，需要遍历的就是sList
            */

            // 用来遍历对象信息用的

            /**
             * 所使用的备份数据的方式：searchList是在方法中声明的局部变量
             * 该变量是在触发当前方法的时候，为sList 做备份
             * 例如：
             *    经过搜索s关键字之后，sList中经过重新装配的对象有zs和ls
             *    当在一次进行搜索，在一次触发该方法的时候，为searchList备份的sList，就只能备份zs和ls这两个对象了
             *    所以造成的结果，是数据越来越少，能够搜索的有效的数据的范围，仅仅只是在上一次搜索后产生的对象数组
             * 对于备份的信息，一定要写成模型，而且备份的方式，是完全copy需要备份的信息
            */

            // searchList = this.sList;
            // 用来装配新对象用的
            this.sList=[];
            
            for(var i=0;i<this.searchList.length;i++){
              
              /**
               * 使用indexOf方法做判断
               * 如果判断结果大于等于0，说明该名称是有效的搜索项
              */
              if(this.searchList[i].name.indexOf(this.sname)>=0){
                // 将搜索到的有效的对象，重新装配到sList中
                this.sList.push(this.searchList[i]);
              }

            }

          }


        }
      });
    </script>

</body>

</html>