vue3 +element+ts编辑按钮保存取消切换

如果你想在 Vue3 + Element + TypeScript 中实现编辑按钮保存取消切换，可以按照以下步骤：

1. 创建一个组件，包含编辑和保存/取消按钮以及要编辑的表单。

2. 在组件的 data 中设置一个变量，用于跟踪编辑状态。例如，可以设置一个名为isEditing的变量，并将其初始值设置为false。

3. 当用户点击编辑按钮时，将isEditing设置为true，这样表单就变为可编辑状态。

4. 当用户点击保存按钮时，可以将表单的数据提交到后端，并将isEditing设置为false，这样表单就变为不可编辑状态。

5. 当用户点击取消按钮时，可以将表单的数据重置为原始数据，并将isEditing设置为false，这样表单就变为不可编辑状态。

6. 在模板中，可以使用v-if指令根据isEditing的值来切换编辑和保存/取消按钮的显示。

下面是一个示例代码：

<template>
  <div>
    <el-button v-if="!isEditing" @click="isEditing = true">编辑</el-button>
    <el-button v-else @click="save">保存</el-button>
    <el-button v-else @click="cancel">取消</el-button>

    <el-form v-if="isEditing" :model="formData">
      <!-- 表单控件 -->
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      isEditing: false,
      formData: {} as any
    };
  },

  methods: {
    save() {
      // 提交表单数据到后端
      // ...
      this.isEditing = false;
    },

    cancel() {
      // 重置表单数据
      // ...
      this.isEditing = false;
    }
  }
});
</script>

注意，由于 TypeScript 的类型检查，需要将formData的类型设置为any。如果你的表单有多个字段，可以使用一个接口或类型别名来定义表单数据的类型。