element-ui+vue project - to realize the automatic focus of the input box in the first row of the table - basic accumulation

Recently, I was writing a background management system, which is a project of elementUi+vue. I encountered a requirement: according to certain conditions, the input box of the first row in the table should be automatically focused.

The effect picture is as follows:

At this time, it is about the operation of dom. Since I am not very skilled in the operation of dom, I will record it here.

My solution is: get the data of the first row, store it in a variable, and then bind the components of the input box with ref.

1. Store the data of the first row

this.currentRow = this.tableData[0]

2. tableBinding in componentsref

<el-table-column prop="finalNum" label="入库量" width="160">
	<template slot-scope="scope">
	    <div style="display:flex;justify-content:center;align-items:center;height:100%;">
	        <el-input-number v-model="scope.row.amount" :id="currentRow.id==scope.row.id?'inputRef':''" controls-position="right" size="mini" placeholder="输入数量" @@keyup.enter.native="pointFn(scope.row,scope.$index,bomIndex,index,bom)"></el-input-number>
	        <div style="width:28px;height:28px;background:#67C23A;color:#fff;line-height:28px;text-align:center;border-radius:0 4px 4px 0;"
	             @@click="pointFn(scope.row,scope.$index,bomIndex,index,bom)">
	            <i class="el-icon-check"></i>
	        </div>
	    </div>
	</template>
</el-table-column>

The important points in the above code are::id="currentRow.id==scope.row.id?'inputRef':''"

3. The console view element元素is as follows:

As can be seen from the figure above, there is a component inputRefunder the element , and the effect to be achieved is to focus on this component. So you need to get the components under the elementinputinput
id='inputRef'input

input4. Take the input box in the first line to achieve the focus effect

this.$nextTick(() => {
    
    
	//此处的延时函数只是为了页面能够渲染完成，其实不加也是可以的，$nextTick就已经是页面渲染完成后再处理的方法了。
    setTimeout(() => {
    
    
    	//查找$('#inputRef')元素下面的`input`组件，是通过find方法，而且查出来是一个数组，给数组的第0项添加focus聚焦方法
        let len = $('#inputRef').find('input').length;
        console.log("$('#inputRef')", $('#inputRef').find('input'), len);
        if (len > 0) {
    
    
            $('#inputRef').find('input')[0].focus();
        }
    }, 100)
})

Finish! ! ! Accumulate a lot, harvest a lot.