实现用户编辑

目录

一、复用新增按钮的模态框

1.定义编辑点击事件

2.定义一个变量区分编辑和新增

3.判断

4.定义handleEdit

二、区分

1.重新定义新增点击事件

2.定义handleAdd

三、传出

1.点击编辑传入原有数据

2、变量接收

3、性别处理

4.重置

5、报错

三、点击编辑修改模态框里的数据

1.新增接口

2.判断

---

一、复用新增按钮的模态框

1.定义编辑点击事件

<el-button size="small" @click="handleEdit()">编辑</el-button>

2.定义一个变量区分编辑和新增

const action = ref('add')

3.判断

:title判断  如果action是add 那么模态框显示新增用户否则显示编辑用户

<el-dialog
    v-model="dialogVisible"
    :title="action == 'add' ? '新增用户' : '编辑用户' "
    width="35%"
    :before-close="handleClose"
  >

4.定义handleEdit

点击编辑时显示编辑模态框

// 编辑用户
const handleEdit = () => {
    action.value = "edit";
    dialogVisible.value = true;
};

二、区分

1.重新定义新增点击事件

<el-button type="primary" @click="handleAdd">+新增</el-button>

2.定义handleAdd

点击新增时显示新增模态框

    // 新增用户
    const handleAdd = () => {
      action.value = "add";
      dialogVisible.value = true;
    }

三、传出