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 = 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 = 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
    }
  }