vue3+elementplus+ts dialogform 表单添加，编辑回显

废话不多说上代码

/* eslint-disable prefer-const */
<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="formObj.userId ? '编辑': '新增'"
    width="1000px"
  >
    <el-form :model="formObj"  :rules="rules" ref="userform" label-width="100px">
      <el-form-item label="登录名:">
        <el-input v-model="formObj.userCode" placeholder="请输入登录名"/>
      </el-form-item>
      <el-form-item label="手机号码:">
        <el-input v-model="formObj.mobile"  maxlength="20" placeholder="请输入手机号码"/>
      </el-form-item>
      <el-form-item label="密码:">
        <el-input v-model="formObj.password" maxlength="32" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item label="用户姓名:">
        <el-input v-model="formObj.userName" placeholder="请输入用户姓名"/>
      </el-form-item>
      <el-form-item label="关联角色:"  prop="description">
        <el-input v-model="formObj.roleIdStr" placeholder="请选择关联角色"/>
      </el-form-item>
      <el-form-item label="关联仓库:"  prop="description">
        <!-- <el-input v-model="formObj.roleIdStr" placeholder="请选择关联角色"/> -->
        <!-- 单组件 -->
        <!-- <template :v-slot="`default`">
        </template> -->
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button key="submit" type="primary" :loading="loading" @click="save">保存</el-button>
      <el-button key="back" @click="cancle">取消</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, onMounted, PropType, reactive, ref, toRaw} from 'vue'
import { ElForm } from 'element-plus'
const dialogVisible = ref<boolean>(false)
const loading = ref<boolean>(false)
const rules = reactive({})
// const formObj = reactive({
//   userCode: '',
//   mobile: '',
//   password: '',
//   userName: '',
//   roleIdStr: ''
// })
const formObj = reactive({})
export default defineComponent({
  props: {
    obj: Object
  },
  setup(props, context) {
    // form
    const userform = ref<typeof ElForm>()
    // 重置
    // 新增弹框 - 提交
    const onSubmitAdd: any = async (values: any, reset: () => void) => {
      //  onSubmitLoading.value = true
    }
    const save = () => {
      try {
        const valid: boolean | undefined = userform.value?.validate()
        if (valid === true) {
           onSubmitAdd(formObj)
        }
      } catch(error) {
        // ElMessage.warning('验证不通过，请检查输入')
      }
    }
    const cancle = () => {
      dialogVisible.value = false
    }
    const reset = () => {
      dialogVisible.value = true
    }
    const open = () => {
      const userId: string | null = props.obj?.userId
      Object.assign(formObj, userId ? props.obj : {})
      dialogVisible.value = true
    }
    
    onMounted(() => {
      // console.log(111)
    })
    return {
      formObj,
      userform,
      reset,
      rules,
      open,
      save,
      cancle,
      dialogVisible,
      loading
    }
  }
})
</script>