原理：进行v-for循环时加入参数index，实现对单行的操作，利用contenteditable实现修改
（使用vue-cli 可直接复制查看效果，没写CSS）
<template>
  <!--表单的增删和修改-->
  <div class="hello">
    <table>
      <caption>麻将</caption>
      <thead>
        <tr>
          <th>条</th>
          <th>筒</th>
          <th>万</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(mj,index) in mjs">
          <td :contenteditable="mj.edi">{{mj.tiao}}</td>
          <td :contenteditable="mj.edi">{{mj.tong}}</td>
          <td :contenteditable="mj.edi">{{mj.wan}}</td>
          <td>
            <button @click="mod(index)">修改</button>
            <button @click="save(index)">确定</button>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>

    </table>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      mjs: [
        {edi:false,tiao:'一条',tong:'一筒',wan:'壹万'},
        {edi:false,tiao:'二条',tong:'二筒',wan:'贰万'},
        {edi:false,tiao:'三条',tong:'三筒',wan:'叁万'},
      ]
    }
    },
   methods: {
      mod:function(index){
        this.mjs[index].edi=true
      },
      del: function (index) {
        this.mjs.splice(index, 1);
      },
      save:function(index){
        this.mjs[index].edi=false
      },
      add:function(){
        this.mjs.push({edi:true,tiao:'',tong:'',wan:''})
      },
    }
}
</script>

对数据的修改的保存有欠缺，新增了input标签进行数据绑定，同时优化了数据的模式，可查看

https://blog.csdn.net/Lisunlight/article/details/81221017