前言

vue行内编辑在开发业务中我们经常遇到的,本文章是通过改变**row.edit**来实现文本的编辑，通过**row.originalTitle**重新为**row.title**赋值

本文通过操作的编辑按钮和双击文本框内容来实现的

1、效果图（简单案例的实现）

2、vue中的代码

<template>  <div class="install">    <el-tabs v-model="activeName" @tab-click="handleClick">      <el-table :data="tableData" stripe style="width: 100%">        <el-table-column label="单位名称" align="center" width="600" show-overflow-tooltip>          <template #default="{ row }">            <template v-if="row.edit">              <el-input v-model="row.name" style="width: 300px" />              <el-button class="cancel-btn" type="warning" @click="cancelEdit(row)">                取消              </el-button>            </template>            <span @dblclick="row.edit = !row.edit"  v-else>{{ row.name }}</span>          </template>        </el-table-column>        <el-table-column label="用途" prop="use" align="center" :show-overflow-tooltip="true"></el-table-column>        <el-table-column label="安装设备" prop="equipment" align="center" :show-overflow-tooltip="true"></el-table-column>        <el-table-column label="操作" prop="desc" align="center">          <template #default="{ row,$index }">            <el-button v-if="row.edit" size="small" type="success" @click="confirmEdit(row, $index+1)">              保存            </el-button>            <el-button v-else icon="el-icon-edit" size="small" type="primary" @click="row.edit = !row.edit">              编辑            </el-button>          </template>        </el-table-column>      </el-table>    </el-tabs>  </div></template><script>  import { defineComponent, toRefs, reactive, ref } from "vue";  import { useRouter } from "vue-router";  import { Consent, TrunDown } from "@/utils/method";  export default defineComponent({    name: "index",    components: {},    setup() {      const data = reactive({        // 列表信息        tableData: [          {            name: "单位名称单位名称",            use: "饭店",            equipment: "煤气表,热水器"          },          {            name: "单位名称单位名称",            use: "饭店",            equipment: "煤气表,热水器"          },        ]      });      const confirmEdit = (row,index) => {        row.edit = false;        row.originalTitle = row.title;      };      const cancelEdit = row => {        row.title = row.originalTitle;        row.edit = false;      };      return {        ...toRefs(data),        confirmEdit,        cancelEdit      };    },  });</script>