原生代码实现table的删除 修改 弹窗及计数器功能

<template>
  <div class="Box">
    <div class="tableBox">
      <div style="width: 75%; margin-bottom: 15px; display: flex; justify-content: space-between">
        <div>
          <span>选择日期：</span>
          <input type="date" />
        </div>
        <div>订单编号:17639840913</div>
      </div>
      <table style="width: 75%; text-align: center" border="1" cellspacing="1">
        <thead>
          <tr>
            <th>序号</th>
            <th>产品名称</th>
            <th>价钱</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>
              {{ item.id }}
            </td>
            <td style="max-width: 150px; min-width: 100px">
              <span v-show="item.isedit" @dblclick="changeEdit(index)">{{ item.name }}</span>
              <input
                type="text"
                v-show="!item.isedit"
                v-model="item.name"
                @blur="blur_(index)"
                @keyup.enter="blur_(index)"
              />
              <!-- 控制弹窗显示 -->
              <button style="border: none" @click="handleClick">...</button>
            </td>
            <td>
              {{ item.price }}
            </td>
            <td>
              <button @click="deleteItem(index)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="modelBox" v-show="openModel">
      <div class="model">
        <div class="closemodel">
          <div>
            <div>
              <button @click="decreaseCounter">减少</button>
              <span>{{ counter }}</span>
              <button @click="increaseCounter">增加</button>
            </div>
          </div>
          <div @click="openModel = false">关闭弹窗</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: '手机',
          price: 1999,
          isedit: true //是否允许编辑
        },
        {
          id: 2,
          name: '电脑',
          price: 9999,
          isedit: true //是否允许编辑
        },
        {
          id: 3,
          name: '鼠标',
          price: 99,
          isedit: true //是否允许编辑
        }
      ],
      openModel: false,
      //计数器
      counter: 0
    }
  },
  methods: {
    handleClick() {
      this.openModel = true
    },
    // 双击控制是否可以编辑
    changeEdit(res) {
      this.list[res].isedit = false
    },
    // 失去焦点退出编辑
    blur_(res) {
      this.list[res].isedit = true
    },
    //删除功能
    deleteItem(res) {
      var reslut = confirm('你确定要删除吗？')
      if (reslut) {
        // 删除
        this.list.splice(res, 1)
        // 更新序号
        this.list.forEach((item, idx) => {
          item.id = idx + 1
        })
      }
    },
    // 计数器 加
    increaseCounter() {
      this.counter++
    },
    // 计数器 减
    decreaseCounter() {
      if (this.counter > 0) {
        this.counter--
      }else{
        alert('不能再减了')
      }
    }
  }
}
</script>
<style>
.Box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
.tableBox {
  width: 100%;
  height: 50%;
  border: 1px solid #ebeef5;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.modelBox {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.model {
  width: 50%;
  height: 50%;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 10px;
  margin: 0 auto;
}
.closemodel {
  display: flex;
  justify-content: space-between;
}
</style>