编辑添加共用一个dialog 【vue3➕element-puls】

1.引入dialog

  <el-dialog
    v-model="showAdd"
    :title="formTitle"
    width="30%"
    align-center
  >
  <el-form
    ref="ruleFormRef"
    :model="formModel"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="分类名称" prop="cate_name">
      <el-input v-model="formModel.cate_name" autocomplete="off" />
    </el-form-item>
    <el-form-item label="分类别名" prop="cate_alias">
      <el-input
        v-model="formModel.cate_alias"
        autocomplete="off"
      />
    </el-form-item>
  </el-form>
    <template #footer >
      <span class="dialog-footer">
        <el-button type="primary" @click="addConfirm()">确认</el-button>
        <el-button @click="addCancel()">取消</el-button>
      </span>
    </template>
  </el-dialog>

2.添加表单接口

export type ArtAddChannelParamsType = {
    cate_name: string
    cate_alias: string
}

//添加文章分类
export const artAddChannelService = (params: ArtAddChannelParamsType) =>  { 
        const { cate_name, cate_alias } = params
        return request.post('/my/cate/add',{ cate_name, cate_alias })  
    }

3.点击添加表单

1.通过dialog中 v-model属性控制对话框显示隐藏
2.点击添加表单后让对话框中的input框不显示东西

formModel.value = {cate_name:'', cate_alias:''

3.通过:title改变对话框名称

formTitle.value = '添加分类'

4.点击编辑表单

1.点击那一行的编辑在点击事件函数中就传入row
2.在函数外面新建一个变量让变量等于传入的row这样在后面一个函数中可以用到传递过来的row
3.formModel.value = row 让数据回显

const onEditChannel = async (row:any) => {
  console.log(row)
  formTitle.value = '编辑分类'
  showAdd.value = true
  formModel.value = row
  row.value = row
}

5.点击确认

1.首先判断是添加还是编辑
2.编辑时要传入刚才接收的row的id 使用展开运算符…将formModel的内容展开 传递3个参数

const addConfirm = async () => {
  await ruleFormRef.value.validate() 
  if( formTitle.value == '添加分类') {
    console.log('开始添加分类');
    await artAddChannelService(formModel.value)
    ElMessage.success('添加成功')
  } else {
    console.log('开始编辑分类');
    await artUpChannelService({id:row.value.id, ...formModel.value})
    ElMessage.success('编辑成功')
  }
  showAdd.value = false
  getChannelList()