element ui 点击单元格切换为输入框并且自动获取焦点

html

1.  
   <el-table
2.  
   ref="table"
3.  
   :data="aqjyData"
4.  
   border
5.  
   style="width: 100%"
6.  
   max-height="500"
7.  
   @cell-click="rowstatus"
8.  
   >
9.  
   <el-table-column
10.  
    label="序号"
11.  
    width="150"
12.  
    type="index"
13.  
    />
14.  
    <el-table-column
15.  
    label="建议"
16.  
    width="auto"
17.  
    >
18.  
    <template slot-scope="scope">
19.  
    <span
20.  
    v-if="!scope.row.suggestFlag "
21.  
    >
22.  
    {{ scope.row.suggest }}
23.  
    </span>
24.  
    <el-input
25.  
    v-if="scope.row.suggestFlag "
26.  
    ref="input"
27.  
    v-model="scope.row.suggest"
28.  
    placeholder="请输入内容"
29.  
    @blur="blur(scope.row,scope.column)"
30.  
    />
31.  
    </template>
32.  
    </el-table-column>
33.  
     
34.  
    <el-table-column
35.  
    label="操作"
36.  
    width="120"
37.  
    >
38.  
    <template slot-scope="scope">
39.  
    <el-button
40.  
    type="text"
41.  
    size="small"
42.  
    @click.native.prevent="deleteRow(scope.$index, aqjyData)"
43.  
    >
44.  
    移除
45.  
    </el-button>
46.  
    </template>
47.  
    </el-table-column>
48.  
    </el-table>

js

1.  
   methods:{
2.  
   // 点击单元格切换单元格状态为输入框
3.  
   rowstatus(row, column, cell, event) {
4.  
   if (column.label === '建议') {
5.  
   row.suggestFlag = true
6.  
   //重新获取输入框的焦点
7.  
   this.$nextTick(() => {
8.  
   this.$refs.input.focus()
9.  
   })
10.  
    }
11.  
    },
12.  
    // 输入框失焦事件
13.  
    blur(row, column) {
14.  
    // 失焦时改变输入框的状态为表格
15.  
    if (column.label === '建议') {
16.  
    row.suggestFlag = false
17.  
    }
18.  
    },
19.  
    }

这篇好文章是转载于：学新通技术网