循环中使用$refs实现el-input聚焦

403 阅读1分钟

image.png

点击编辑或是添加标签的时候出现el-input框并聚焦,为了在失去焦点的时候让el-input消失

image.png

因为标签是循环的所以el-input不是唯一的,使用index增加唯一性

:ref="`tagInput${index}`"

在使用this.$refs获取时你会发现是个数组,so

this.$refs[`tagInput${index}`][0].focus()

在点击编辑的时候我们首先需要更改标签的状态让其显示,之后再给它聚焦,但这时候el-input的DOM元素可能还没渲染完导致聚焦不上,所以需要用到this.$nextTick({})

//  编辑标签
editTagCli(index, i) {
  this.list[index].label_data[i].tagFlag = false;
  this.$nextTick(()=>{
    this.$refs[`tagInput${index}`][0].focus()
  })
},