vue行内编辑内容（通过row.edit来改变）

前言

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>