<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)
}
})
请求完成之后自动添加一条数据,同时文本框获得焦点,现在新增的数据没办法获取到焦点
在Vue中,你可以使用v-model
指令来管理输入框的值,然后使用v-if
指令来判断是否为焦点状态。以下是一个示例:
html
<input type="text" v-model="inputValue" v-if="isInputFocus" @input="setInputFocus">
在这个例子中,v-model
指令将输入框的值绑定到inputValue
属性中,v-if
指令将只有当inputValue
为真时才显示输入框,这样就可以立即获取到焦点状态。
注意,你需要确保你的inputValue
在v-if
条件中始终为真,否则输入框将不会显示。
此外,如果你的输入框是通过JavaScript动态添加的,你可能需要使用v-for
指令来遍历输入框的所有子元素,以便正确获取焦点。以下是一个示例:
```html
```
在这个例子中,v-for
指令遍历inputs
数组中的所有元素,每个元素都有一个唯一的ID。v-model
指令将输入框的值绑定到inputValue
属性中,v-if
指令将只有当inputValue
为真时才显示输入框,这样就可以立即获取到焦点状态。