vue elmentui 可编辑table 实现

废话不多说上图：

1.可编辑input

2.可编辑下来框

3.点击chechbox

4.可编辑radio

其实后面两种可以直接显示值 需要修改直接改就行

保持风格统一所以就做了点击之后出现修改功能

上代码，不要哔哔 哈哈 粗暴   真得是曲不离口 拳不离手， 几天不练习都不会写了

声明：部分代码有借鉴

<template>
<div class="divCaculateResultDisplay">
      <div class="divParamInput2">
        <label class="labConfidenceParamTitle">结果：</label>
      </div>
      <div class="divNotAllowCaculateResult">
        <el-table
        border
        height="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-option
                  v-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.index
            this.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>