废话不多说上图：
1.可编辑input
2.可编辑下来框
3.点击chechbox
4.可编辑radio
其实后面两种可以直接显示值 需要修改直接改就行
保持风格统一所以就做了点击之后出现修改功能
上代码，不要哔哔 哈哈 粗暴 真得是曲不离口 拳不离手， 几天不练习都不会写了
声明：部分代码有借鉴
<template>
<div class="divCaculateResultDisplay"><div class="divParamInput2"><label class="labConfidenceParamTitle">结果：</label></div><div class="divNotAllowCaculateResult"><el-tableborderheight="385":data="tableData"class="tb-edit"style="width: 100%"@cell-click="getCell":cell-class-name="tableCellClassName"highlight-current-row><el-table-column fixed align="center" prop="createTime" label="创建时间" width="150"></el-table-column><el-table-column prop="powerFactor" label="功率因素" width="" align="center"><template slot-scope="scope"><el-input v-model="scope.row.powerFactor" @blur="handleBlur(scope.row)" v-if=' scope.row.index == tabRowIndex && scope.column.index == tabColumnIndex' v-focus></el-input><div v-else><span >{{scope.row.powerFactor}}</span></div></template></el-table-column><el-table-column prop="selecttest" label="测试选择下拉" width="" align="center" ><template slot-scope="scope"><el-select v-focus v-model="scope.row.selecttest" v-if=' scope.row.index == tabRowIndex && scope.column.index == tabColumnIndex' @change="handleBlur(scope.row)" ><el-optionv-for="item in FloorsOptions":key="item":label="item":value="item"></el-option></el-select><div v-else><span >{{scope.row.selecttest}}</span></div></template></el-table-column><el-table-column prop="checkboxtest" label="测试check" width="" align="center" ><template slot-scope="scope"><el-checkbox v-model="scope.row.checkboxtest" v-if=' scope.row.index == tabRowIndex && scope.column.index == tabColumnIndex' @change="handleBlur(scope.row)" label="复选框测试"></el-checkbox><div v-else><span >{{scope.row.checkboxtest}}</span></div></template></el-table-column><el-table-column prop="radiotest" label="测试radio" width="" align="center" ><template slot-scope="scope"><el-radio-group v-if=' scope.row.index == tabRowIndex && scope.column.index == tabColumnIndex' v-focus @change="handleBlur(scope.row)" v-model="scope.row.radiotest" ><el-radio label="男" >男</el-radio><el-radio label="女" >女</el-radio></el-radio-group><div v-else><span >{{scope.row.radiotest}}</span></div></template></el-table-column><!-- 此处省略 --><el-table-column label="操作"><template slot-scope="scope"><el-button @click="handleRowEdit(scope.$index, scope.row)">编辑</el-button><el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><el-pagination :current-page="page" :page-size="10" @current-change="CurrentChange" style="margin-top: 10px;display: flex;justify-content: center;align-items: center;" background layout="prev, pager, next" :total="total"></el-pagination></div></div>
</template>
<script>export default {directives: {//注册一个局部的自定义指令 v-focus，输入框自动聚焦focus: {inserted: function (el) {el.querySelector('input').focus()}}},
data() {return {page: 1,tabRowIndex: null, //行角标tabColumnIndex: '', //列角标limit: 10,total:0,FloorsOptions:["test1","test2","test3","test4","test5"],tableData: [{createTime:"2024-01-01",powerFactor:"555",selecttest:"test1",checkboxtest:"false",radiotest:"",setingFlag:false},{createTime:"2024-02-01",powerFactor:"66",selecttest:"test2",checkboxtest:"false",radiotest:"",setingFlag:false},{createTime:"2024-03-01",powerFactor:"66",selecttest:"test3",checkboxtest:"false",radiotest:"",setingFlag:false},{createTime:"2024-04-01",powerFactor:"66",selecttest:"test4",checkboxtest:"false",radiotest:"",setingFlag:false},],}},
methods: {getCell(row, column, cell, event) {console.log("行的内容:",row);this.tabRowIndex = row.indexthis.tabColumnIndex = column.index},tableCellClassName({row, column, rowIndex, columnIndex}){//注意这里是解构//利用单元格的 className 的回调方法，给行列索引赋值row.index=rowIndex;column.index=columnIndex;},handleBlur(row) {row.setingFlag = false;const param={id:row.id,powerFactor:row.powerFactor,currentA:row.currentA,currentB:row.currentB,currentC:row.currentC,voltage:row.voltage,voltageA:row.voltageA,voltageB:row.voltageB,voltageC:row.voltageC,activePower:row.activePower,selecttest:row.selecttest,reactivePower:row.reactivePower,apparentPower:row.apparentPower,calculatedPowerFactor:row.calculatedPowerFactor,energyConsumption:row.energyConsumption}this.tabRowIndex = null;this.tabColumnIndex = null;console.log("handleBlur========================");console.log(param);},handleRowEdit(index ,row){this.$set(row, "setingFlag", true)},handleDelete( index, row){console.log(index )console.log( row)},CurrentChange(){console.log("CurrentChange")},}
}
</script>
