Vue.js+Element UI：点击启用的Edit按钮激活Cancel并添加Save按钮

Vue 2 + Element UI 实现代码 #

<template>
  <div>
    <el-button type="primary" @click="handleEdit" :disabled="isEditing">Edit</el-button>
    <el-button type="danger" :disabled="!isEditing" @click="handleCancel">Cancel</el-button>
    <!-- 动态显示Save按钮 -->
    <el-button type="success" v-if="isEditing" @click="handleSave">Save</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isEditing: false // 控制编辑状态的响应式变量
    }
  },
  methods: {
    handleEdit() {
      this.isEditing = true; // 切换到编辑状态
    },
    handleCancel() {
      this.isEditing = false; // 退出编辑，恢复初始状态
      // 这里可添加重置表单数据的逻辑
    },
    handleSave() {
      // 这里添加表单提交/数据保存的逻辑
      console.log('执行保存操作');
      // 保存完成后退出编辑状态
      this.isEditing = false;
    }
  }
}
</script>

Vue 3 + Element Plus 实现代码（Setup语法糖） #

<template>
  <div>
    <el-button type="primary" @click="handleEdit" :disabled="isEditing">Edit</el-button>
    <el-button type="danger" :disabled="!isEditing" @click="handleCancel">Cancel</el-button>
    <el-button type="success" v-if="isEditing" @click="handleSave">Save</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isEditing = ref(false); // 响应式变量控制编辑状态

const handleEdit = () => {
  isEditing.value = true;
};

const handleCancel = () => {
  isEditing.value = false;
  // 可添加表单重置逻辑
};

const handleSave = () => {
  // 实现数据保存逻辑
  console.log('保存成功');
  isEditing.value = false;
};
</script>

核心逻辑说明 #

• 用响应式变量isEditing统一控制按钮状态：
  • 初始状态isEditing为false，Cancel按钮通过:disabled="!isEditing"保持禁用，Save按钮通过v-if="isEditing"隐藏
  • 点击Edit按钮后，isEditing设为true，Cancel按钮自动解除禁用，Save按钮自动显示
  • 点击Cancel或完成Save操作后，将isEditing设回false，恢复初始界面状态

内容的提问来源于stack exchange，提问作者Vijay Rathod