vue+bootstrap制作简易表格的添加、删除与搜索

最新推荐文章于 2020-12-04 15:37:28 发布

云之前端

最新推荐文章于 2020-12-04 15:37:28 发布

阅读量736

点赞数 3

分类专栏： vue bootstrap 学习总结

本文链接：https://blog.csdn.net/qq_44586361/article/details/98357860

版权

学习总结同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

bootstrap

2 篇文章 0 订阅

订阅专栏

所用到的技术vue+bootstrap
效果图如下
在这里插入图片描述
代码如下所示

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">  
  <script src="jquery-3.3.1.js"></script>
  <script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <style>
   .top-input {
    height: 34px;
   }
  </style>
</head>
<body>
<div id = "app">
<label>id:</label>
<input class="top-input" type = "text" placeholder = "请输入id" v-model = "id">
<label>name:</label>
<input class="top-input" type = "text" placeholder = "请输入name" v-model = "name">
<button type = "button" class="btn btn-primary" @click = "add()">添加</button>
<label>搜索关键字:</label>
<input class="top-input" type = "text" placeholder = "请输入关键字" v-model = "keywords">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>日期</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for = "item in search(keywords)" :key = "item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.ctime}}</td>
        <td><a href=" " @click.prevent = "deleteC(item.id)">删除</a></td>
        <!--加修饰符.prevent阻止a链接的默认行为-->
      </tr>
    </tbody>
  </table>
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    id: '',
    name: '',
    keywords: '',
    listTwo: [],
    list: [
     {id: 1, name: '奔驰', ctime: new Date()},
     {id: 2, name: '宝马', ctime: new Date()},
     {id: 3, name: '奥迪', ctime: new Date()},
    ]
  },
  methods: {
    add() {
      const commodities = {id: this.id, name: this.name, ctime: new Date()};
      this.list.push(commodities);
      this.id = this.name = '';
    },
    deleteC(id) {
     this.list.some((item, i) => {
      if (item.id === id) {
        this.list.splice(i, 1);
        return true;
      }
     });
    },
    search(keyword) {
      const newList = [];
      this.list.forEach((item) => {
        if (item.name.indexOf(this.keywords) != -1) {
          newList.push(item);
        }
      })
      return newList;
    },
  }
})
</script>
</body>
</html>

在这段代码中，删除按钮的方法也可以使用数组的some方法

deleteC(id) {
   this.list.some((item, i) => {
      if (item.id === id) {
        this.list.splice(i, 1);
        return true;
      }
    );
},

在这段代码中，搜索的方法也可以使用filter,并且把indexOf换成了数组的includes方法

search(keyword) {
   return this.list.filter((item) => {
        if (item.name.includes(this.keywords)) {
          return true;
        }
   });
},

但是，以上的添加也是存在bug的，因为还没有进行验证，具体的验证方法，这里我就不一一阐述了，之后的博客会专门写表单验证的具体方法。

云之前端

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue+bootstrap制作简易表格的添加、删除与搜索

所用到的技术vue+bootstrap效果图如下代码如下所示<!DOCTYPE html><html><head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <...
复制链接

扫一扫