El-table中El-input 动态绑定ref 并获取焦点


 

 

一、表格需要加上::row-class-name="tableRowIndex"
methods中: tableRowIndex({row, rowIndex}) { //把每一行的索引放进row
      row.index = rowIndex;
     },

二、

<el-table-column label="名称" width="180">
  <template slot-scope="scope">
    <el-input v-model="scope.row.Name" :ref="'Input_'+scope.$index"></el-input>
  </template>
</el-table-column>

// ..每次添加一条信息时,自动将焦点聚焦到该行的名称input上。
this.$nextTick(_ => {
  if( this.list.length !== 0){
    this.list.forEach( (item, index) => {
      if( Number( index) === Number( this.list.length-1)) {
        this.$refs['Input_'+Number((item.index))].focus(); // 将最后一行的名称input框获取焦点。
      }
    });
  }
});


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM