主要讲$nextTick的用法, 既dom渲染完成执行的回调
实现的效果:当点击调价按钮的时候获取焦点
当点击调价按钮的时候获取焦点
html代码
<tr class="table-row" v-for=" (item,index) in tableData">
<td v-show="item.show"><input type="number" ref="input" v-model="item.oldPrice" /></td>
<td v-show="!item.show">{{item.price|fmtMoney}} </td>
<td style="text-align:right">
<i-button @click="editItem(item,index)" type="primary" size="small">{{item.show==1?"确定":"调价"}}</i-button>
</td>
</tr>
js代码
methods:{
editItem:function(item,index){
// 控制显示或者隐藏input
if(item.show == 1){
this.$set(item,'show', 0);
}else{
this.$set(item,'show', 1);
// 获取焦点
// 错误代码
this.$refs.input[index].focus();
// 正确代码
this.$nextTick(function(){
this.$refs.input[index].focus();
})
}
}
}
- 给input设置ref
- 通过this.$refs获取dom
- 给dom设置焦点focus()
Tips: 设置对象属性时需要用$set否则dom不会重新渲染
Tips: focus()在dom渲染之前执行是无效的(显示但不会获取焦点),所以的用$nextTick,
