vue3+elementplus使用记录 vue3+elementplus使用记录

【vue3+elementplus使用记录】由于elementplus部分只给了Options API的写法，故再此记录使用Composition API写过的组件的方法。
form表单相关
现在想要获取ref需要进行一下操作

import { ref } from 'vue' setup () { // 第一步定义ref, 名称与html中的ref="yourRef"一致,并return出去 const yourRef = ref() // 然后就可以和vue2中的ref一样使用了 // 提交表单 const saveOneBlog = () => { console.log('listen formRef', formRef) formRef.value.validate(async (valid) => { if (valid) { const res = await api(params) console.log(res) } }) } // 重置表单 const reset = () => { yourRef.value.resetFields() } return { yourRef } }

表单部分代码
html部分

{{ form.createTime }} {{ form.lastUpdateTime }} reset Save and add aother Save

script部分

setup () { // form dom const formRef = ref() // form data const formData = https://www.it610.com/article/reactive({ form: { blogTitle:'', blogTypeId: '', blogContent: '', isShow: true, createTime: '', lastUpdateTime: '' }, blogTypeList: [], rules: { blogTitle: [{ required: true, message: '请输入博客名称', trigger: 'blur' }], blogTypeId: [{ required: true, message: '请选择博客类型', trigger: 'change' }], blogContent: [{ required: true, message: '请输入博客内容', trigger: 'blur' }] } })// submit form data const saveOneBlog = () => { console.log('listen formRef', formRef) formRef.value.validate(async (valid: any) => { if (valid) { const params = { blogTitle: formData.form.blogTitle, blogTypeId: formData.form.blogTypeId, blogContent: formData.form.blogContent } const res = await addOneBlogApi(params) if (res.code === 0) { ElMessage.success('添加成功') } else { ElMessage.error(res.message) } } }) } // reset form const resetForm = () => { formRef.value.resetFields() } const tempData = https://www.it610.com/article/reactive({ isEdit: false }) onMounted(async () => { const res = await getBlogTypeDictApi() if (res.code === 0) { formData.blogTypeList = res.data } })return { ...toRefs(formData), ...toRefs(tempData), saveOneBlog, resetForm, formRef } }