vue2中使用el-table实现直接编辑表格，鼠标点击空白处实现保存并传递给后端的简单方法

一、实现表格编辑

1.首先我们需要用到highlight-current-row去初始定位高亮指定行，意思就是选中某个数据行时,高亮该行。

需求实现如下：点击某个单元格实现整行数据高亮，并且可以修改，修改完成后鼠标点击空白处，实现保存修改后的整行数据并传递给后端。

2.用vue的axios发起post请求：

3. 在el-input中@blur的意思是当元素失去焦点时所触发的事件，当不点击单元格时显示值，点击单元格时显示编辑框，用v-if和v-else来判断

<div class="divCaculateResultDisplay">
      <div class="divParamInput2">
        <label class="labConfidenceParamTitle">结果：</label>
      </div>
      <div class="divNotAllowCaculateResult">
        <div class="divResultTitle">
          <p class="pValueResult">导入数据</p>
        </div>
        <el-table 
        border 
        height="385" 
        :data="tableData" 
        class="tb-edit" 
        style="width: 100%" 
        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">
              <span v-if="!scope.row.setingFlag" @click="handleEdit(scope.row)">{{scope.row.powerFactor}}</span>
              <div v-else>
                <el-input v-model="scope.row.powerFactor" @blur="handleBlur(scope.row)"></el-input>
              </div>
            </template>
          </el-table-column>
          <!-- 此处省略 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--<el-button @click="handleEdit(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>

4.引入接口

5.返回数组

6.方法使用

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,
          reactivePower:row.reactivePower,
          apparentPower:row.apparentPower,
          calculatedPowerFactor:row.calculatedPowerFactor,
          energyConsumption:row.energyConsumption
        }
        modify(param).then(res=>{
          if(res.code == 200){
            this.$message.success('修改数据成功!')
          }else{
            this.$message.error('获取数据失败!')
          }
        })
      },
      handleEdit(row) {
        this.$set(row, 'setingFlag', true)
      },

7.完整代码如下：

<template>
<div class="divCaculateResultDisplay">
      <div class="divParamInput2">
        <label class="labConfidenceParamTitle">结果：</label>
      </div>
      <div class="divNotAllowCaculateResult">
        <div class="divResultTitle">
          <p class="pValueResult">导入数据</p>
        </div>
        <el-table 
        border 
        height="385" 
        :data="tableData" 
        class="tb-edit" 
        style="width: 100%" 
        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">
              <span v-if="!scope.row.setingFlag" @click="handleEdit(scope.row)">{{scope.row.powerFactor}}</span>
              <div v-else>
                <el-input v-model="scope.row.powerFactor" @blur="handleBlur(scope.row)"></el-input>
              </div>
            </template>
          </el-table-column>
          <!-- 此处省略 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--<el-button @click="handleEdit(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>
import {modify} from "@/api/request"
export default {
data() {
      return {
             page: 1,
             limit: 10,
             total:0,
             tableData: [],
        }
    }
methods: {
        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,
          reactivePower:row.reactivePower,
          apparentPower:row.apparentPower,
          calculatedPowerFactor:row.calculatedPowerFactor,
          energyConsumption:row.energyConsumption
        }
        modify(param).then(res=>{
          if(res.code == 200){
            this.$message.success('修改数据成功!')
          }else{
            this.$message.error('获取数据失败!')
          }
        })
      },
      handleEdit(row) {
        this.$set(row, 'setingFlag', true)
      },
    }
}
</script>