且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

javascript - vue怎么实现这种效果?

更新时间:2022-11-08 20:58:34

这是我现在的实现方法

html部分

 <tr v-for ="item in infos" track-by="$index">
            <td>
              <p>{{item.years}}</p>
              <p>{{item.times}}</p>
            </td>
            <td>
              <span>{{item.name}}</span>
              <input  v-model="item.name"  type="text" :class="{'show' :$index===isAddEidt}">
            </td>
            <td >
              <span>{{item.ID}}</span>
              <input  v-model="item.ID"  type="text" :class="{'show' :$index===isAddEidt}">
            </td>
            <td >
              <span> {{item.machine}}</span>
              <input  v-model="item.machine"  type="text" :class="{'show' :$index===isAddEidt}">
            </td>
            <td>
              <span> {{item.dealing}}</span>
              <input  v-model="item.dealing"  type="text" :class="{'show' :$index===isAddEidt}">
            </td>
            <td>
              <div v-if="!item.isEdit" class="btn-add-remove">
                <span class="icon-shuanchu" @click="removeAd($index)"></span>
                <span class="icon-xiugai" @click="addEdit($index)"></span>
              </div>
              <button v-else  class="region btn-style" >保存</button>
            </td>
          </tr>

js部分

data{isAddEidt:true},
methods:function(){
    addEdit:function (index) {
      this.isAddEidt=index;
      this.infos[index].isEdit = true;
    }
}

不足的地方还请各位大神指教下