javascript - vue怎么实现这种效果?
本文介绍了javascript - vue怎么实现这种效果?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
点击编辑按钮时前面的类容可以修改
是拿table布局的
点击编辑按钮时我怎么给前面的td添加contenteditable属性?这个逻辑要怎么写?
<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 class="btn-add-remove">
<span class="icon-shuanchu" @click="removeAd($index)"></span>
<span class="icon-xiugai" @click="addEdit($index)"></span>
</div>
<button class="region btn-style">保存</button>
</td>
</tr>
data:{isAddEidt:true}
methods: {
addEdit:function (index) {
this.isAddEidt=index;
}
}
当点击编辑按钮时怎么隐藏当前的div 然后显示button 我现在这样写有问题每次新增的数据 点击第一个然后后面的所有button都出来了 怎么控制只显示当前的button 和隐藏当前的div?
解决方案
这是我现在的实现方法
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;
}
}
不足的地方还请各位大神指教下
这篇关于javascript - vue怎么实现这种效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文