(ref)vue遍历ref或动态或多层遍历动态ref

<el-input
 ref="'workedInfoRef' + scope.$index" //scope.$index如果是for循环可以是index,这里用了el-table的index
></el-input>
//获取
this.$refs[`workedInfoRef${i}`];
//input手动焦点
this.$refs[`workedInfoRef${i}`].focus();

如果是for循环直接遍历,下面的ref是个数组

<li v-for="(list, index) in tagList" :key="index" ref="tagItem">{{list.value}}</li>
this.$refs.tagItem[0].style.backgroundImage = `url(${xxx})`

双层for循环遍历

三. 双循环动态设置ref
设置【:ref="‘xxx’+id"】或【:ref="‘xxx’+index"】
<div v-for="(item,index) in topicList" :key="index">
      <el-carousel-item v-for="(son,i) in item.questionList" :key="index+i">
           <topic :ref="'topicRef'+son.bId"></topic>
           //或也可以用索引.  用一个索引会重复,如下
           //<topic :ref="'topicRef'+(i+index)"></topic>
      </el-carousel-item>
</div>

获取
        eval("that.$refs.tagItem" +(x+index))[0]
        或
        eval("that.$refs.topicRef" +(ele.bId))[0]
原文地址:https://www.cnblogs.com/dianzan/p/14280592.html