el-table clicks on the cell to become an input box, and the possible reasons for its automatic focus failure (focus failure)

1. el-table click on the cell to become an input box

The three built-in methods/properties of el-table are mainly used here:

<el-table
    :data="MesTableData"
    border
    @cell-click="clickCell"
    :row-class-name="tableRowClassName"
    :cell-class-name="tableCellClassName"
>

clickCell: The click event of the cell is used to determine the cell that becomes the input box according to the currently clicked row and column information.

row-class-name and cell-class-name are used to obtain the row and column information of each cell in order to locate the cell.

// 把每行的索引放进row中
tableRowClassName({ row, rowIndex }) {
    row.index = rowIndex;
},
// 把每列的索引放进column中
tableCellClassName({ column, columnIndex }) {
    column.index = columnIndex;
},

In this way, relevant information can be obtained when clicking:

clickCell(row, column){
    // 获取行列Index并存在一个数组中
    this.activeCellIndex = [row.index, column.index];
    // 使其获取焦点
    this.$nextTick(() => {
        this.$refs['tab'+row.index+column.index].focus()
    })
},

(Part of the code in the table is displayed, and whether to display the el-input box is judged according to activeCellIndex)

<el-table-column prop="value1" label="变量1">
    <template slot-scope="scope">
        <el-input :ref="'tab'+scope.row.index+scope.column.index" 
            v-if="scope.row.index === activeCellIndex[0] 
                && scope.column.index === activeCellIndex[1]" 
            v-model="scope.row.value1"></el-input>
        <div v-else>{
   
   {scope.row.value1}}</div>
     </template>
</el-table-column>

<el-table-column prop="value2" label="变量2">
    <template slot-scope="scope">
        <el-input :ref="'tab'+scope.row.index+scope.column.index" 
            v-if="scope.row.index === activeCellIndex[0] 
                && scope.column.index === activeCellIndex[1]" 
            v-model="scope.row.value2"></el-input>
        <div v-else>{
   
   {scope.row.value2}}</div>
     </template>
</el-table-column>

The effect can be achieved:

 2. Possible reasons for failure to obtain focus:

Possibility 1: You need to get ref and focus() in the timer or nextTick.

Possibility 2: Sometimes when the ref gets the focus, it can print out the DOM corresponding to the ref, but the focus does not take effect.

Later, through the document.querySelectorAll method, the author found that more than one Dom of the class name was obtained. After investigation, it is caused by setting fixed (fixed) in a column of el-table. Setting it will automatically generate a column and not display it, causing the illusion of focus failure.

Solution: get the first eligible Dom and get its focus. (This is the idea, the solution is not unique)

The following is the author's solution:

1. First define the class name for el-input for easy access:

<el-table-column label="变量1">
    <template slot-scope="scope">
        <el-input 
            :class="'tab'+scope.row.index+scope.column.index"                                 
            :ref="'tab'+scope.row.index+scope.column.index" 
            v-if="scope.row.index == activeCellIndex[0] && scope.column.index == activeCellIndex[1]" 
            v-model="scope.row.value1">
        </el-input>
    </template>
</el-table-column>

2. Get the real input and get its focus (different methods, jQuery used here) 

clickCell(row, column){
    this.activeCellIndex = [row.index, column.index];
    this.$nextTick(() => {
        let aimDom = (document.querySelectorAll('.'+'tab'+row.index+column.index));
        // 此处打印aimDom发现有两个dom，组成一个数组。

        // this.$refs['tab'+row.index+column.index].focus();    //失效的原方法

        // 获取第一个符合条件的目标Dom，并获取焦点（笔者这里用的jQuery实现）
        // 因为el-input中的input标签是包裹在其中的，所以获取其children并focus()。
        $('.'+'tab'+row.index+column.index).children()[0].focus();
     })
},

The effect is realized!

I hope this article will be helpful to you~ ^_^