vue动态添加input后怎么立刻获取到焦点

Question

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

<el-table-column prop="Barcodenumber" align="center" label="条形码编号" min-width="300">

                    <template slot-scope="scope">
                        <el-input v-if="scope.row.Tradename===''" style="display: inline-block;width: 200px" @keyup.enter.native="InputBarcode(scope.$index)" ref="saveTagInput"  placeholder="请输入商品条形码" v-model="scope.row.Barcodenumber"></el-input>
                        <el-button v-if="scope.row.Tradename===''" style="margin-left:10px" @click="showInput" type="primary" icon="el-icon-search"></el-button>
                        <span v-if="scope.row.Tradename!=''">{{scope.row.Barcodenumber}}</span>
                    </template>
                </el-table-column>
                
                //js
                InputBarcode(index){
            showStoreGoodsByBarCode({
                goodsBarCode:this.ordersdetailList[index].Barcodenumber
            }).then(res=>{
                if(res.errorCode==='0'){
                    this.ordersdetailList.push({Barcodenumber:"",Tradename:"",Commodityunit:"",Unit:"",Discount:"",Totalprice:"",goodsCode:"",buyNum:""})
                    this.ordersdetailList[index].Tradename = res.data.goodsName
                    this.ordersdetailList[index].Commodityunit = res.data.unit
                    this.ordersdetailList[index].buyNum = 1
                    this.ordersdetailList[index].Unit = res.data.suggestSellPrice
                    this.ordersdetailList[index].Discount = res.data.isConsumable === '2' ? '否' : '是'
                    this.ordersdetailList[index].Totalprice = this.ordersdetailList[index].buyNum * this.ordersdetailList[index].Unit
                    this.ordersdetailList[index].goodsCode = res.data.goodsCode
                    this.$nextTick(() => {
                        this.$refs['saveTagInput'].$refs.input.focus();
                    });
                }else{
                    this.$message.error(res.errorMsg)
                }
            })

你期待的结果是什么？实际看到的错误信息又是什么？

请求完成之后自动添加一条数据，同时文本框获得焦点，现在新增的数据没办法获取到焦点

Answer 1

我也遇到这个问题了，这里应该是elementUI的一个bug，如果不用el-table是可以正常获取焦点的，如果要用el-table，可以用jquery来解决这个问题。

          <el-input
            :id="'code' + scope.$index"
            v-model="scope.row.code"
            @keyup.enter.native="getName(scope.$index)"
          ></el-input>
          

          
    getName(index) {
      setTimeout(function () {
        $('#code' + (index+1)).focus()
      }, 100)
    },