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">
                
                <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
	    },
	    ...
	}
}

方法二