vue+elementUI el-table 点击表格的某一单元格变成输入框el-input

方法一

添加两个方法@cell-click="tabClick" :row-class-name="tableRowClassName"
点击具体的单元格通过v-if="scope.row.index === tabClickIndex"判断

<el-table class="table" :data="dataList" @cell-click="tabClick" :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName" style="width: 100%">
		<el-table-column prop="sqrq" label="还款金额" :width="isInputBlur?'130px':'80px'" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.index === tabClickIndex"
                  ref="editInput"
                  v-model="scope.row.sqrq"
                  v-focus  // 聚焦： 看上一篇博客
                  size="small"
                  type="number"
                  @blur="inputBlur(scope.row)"  // 失焦： 看上一篇博客
                />
                <span v-else>{{ scope.row.sqrq }}</span>
              </template>
        </el-table-column>
        <el-table-column prop="sqrq" label="承担部门" show-overflow-tooltip />
        <el-table-column prop="sqrq" label="项目编码" show-overflow-tooltip />
</el-table>        

<script>
export default {
	data() {
    	return {
    		...
    		tabClickIndex: null, // 列表当前点击行的index
    		...
		}
	},
	methods: {
		...
		// 点单击到表格--还款金额-单元格时触发
	    cellClick(row, column, cell, event) {
	      console.log('cellClick',row, column, cell, event)
	      if (row.column.label === '还款金额') {
	        this.tabClickIndex = row.row.index
	        this.isInputBlur = true
	      } else {
	        this.tabClickIndex = null
	        this.isInputBlur = false
	      }
	    },
	    tableRowClassName({ row, rowIndex }) {
	      // 把每一行的索引放进row
	      row.index = rowIndex
	    },
	    /* 还款金额----失去焦点时 */
	    inputBlur(row) {
	      console.log('传进来的值', row)
	      this.tabClickIndex = null
	      this.isInputBlur = false
	    },
	    ...
	}
}

方法二