vue3+elementplus+ts dialogform 表单添加,编辑回显
废话不多说上代码/* eslint-disable prefer-const */<template><el-dialogv-model="dialogVisible":close-on-click-modal="false":close-on-press-escape="false":title="formObj.userId ? '编辑': '新增'"width="1000p
·
废话不多说上代码
/* 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>
更多推荐
已为社区贡献10条内容
所有评论(0)