增删该查

把data里数据tr标签循环出来
前面的序号就是循环的 {{index+1}}
添加给当前数组push，添加到第一项用unshift 判断用户每一项都填了才可以添加 !=this.xx
删除传递的那一项，del(index) this.items.splice(i,1) i索引 1删除n项
编辑 v-if="layer" 初始值为false，点击编辑的时候为true 传item给edit的方法x:xx，编辑的内容v-model显示出来

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <title>Document</title>
  <style>
    #app {
      margin-top: 100px;
      border: 1px solid blue;
      width: 100%;
    }

    #layer {
      width: 250px;
      height: 160px;
      margin: 20px 50px;
      border: 1px solid black;
    }

    #layer .close {
      margin-left: 180px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="table">
      <div class="add">
        <input type="text" placeholder="标题" v-model="obj.title">
        <input type="text" placeholder="发布人" v-model="obj.user">
        <input type="date" placeholder="发布时间" v-model="obj.dates">
        <button @click="add()" style="color:#f07e22">新增</button>
      </div>

      <table cellpadding="20" cellspacing="0">
        <thead>
          <tr>
            <th>序号</th>
            <th>标题</th>
            <th>发布人</th>
            <th>发布时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in items" :key='item.id'>
            <td>{{index+1}}-{{item.id}}</td>
            <td>{{item.title}}</td>
            <td>{{item.user}}</td>
            <td>{{item.dates}}</td>
            <td>
              <span @click="del(index)" style="color:red">删除</span>
              <span @click="edit(item)" style="color:green">编辑</span>
            </td>
          </tr>
        </tbody>
      </table>

      <div id="layer" v-if="layer">
        <div class="mask">
          <div class="title">
            编辑
            <span class="close" @click="layer = false">x</span>
          </div>
          <div class="content">
            <input type="text" placeholder="标题" v-model="editObj.title">
            <input type="text" placeholder="发布人" v-model="editObj.user">
            <input type="date" placeholder="发布时间" v-model="editObj.dates">
            <button @click="updateItems">更新</button>
            <button @click="layer = false">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        items: [{
          title: '星期一',
          user: 'Monday',
          dates: '2019-10-20',
          id: 1
        }, {
          title: '星期二',
          user: 'Tuesday',
          dates: '2019-11-20',
          id: 2
        }, {
          title: '星期三',
          user: 'Wednesday',
          dates: '2019-12-20',
          id: 3
        }],
        layer: false,
        editObj: {},
        obj: {
          title: '',
          user: '',
          dates: '',
        }
      },
      methods: {
        add() {
        //用户没有输入的时候判断一下，不添加
          if (!this.obj.title || !this.obj.user || !this.obj.dates) return;
        
          var _id = Math.max(...this.items.map((v, i) => {
            return v.id
          })) + 1

          this.items.unshift({
            title: this.obj.title,
            user: this.obj.user,
            dates: this.obj.dates,
            id: _id
          })
          this.obj = {}
        },
        del(i) {
          // console.log(i)
          this.items.splice(i, 1)
        },
        edit(item) {
          this.layer = true;
          this.editObj = {
            title: item.title,
            user: item.user,
            dates: item.dates,
            id: item.id
          }
        },
        updateItems() {
          for (var i = 0; i < this.items.length; i++) {
            if (this.items[i].id == this.editObj.id) {
              this.items[i] = this.editObj;
              this.layer = false;
            }
          }
        }
      }
    })
  </script>
</body>

</html>

样式

增删改查功能可以操作试试，样式美化根据个人喜好调试，这里只是完成了相应功能。

vue 手写table表格实现增删改查

增删该查

代码

样式