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部分

      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="名称" prop="blogTitle">
          <el-input v-model="form.blogTitle" placeholder="请输入博客名称"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="blogTypeId">
          <el-select v-model="form.blogTypeId" placeholder="选择博客类型">
            <el-option
              v-for="item in blogTypeList"
              :key="item.blogTypeId"
              :label="item.typeName"
              :value="item.blogTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" prop="blogContent">
          <v-md-editor v-model="form.blogContent" height="400px" ></v-md-editor>
        </el-form-item>
        <el-form-item label="是否可见" prop="isShow">
          <el-switch v-model="form.isShow" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
        </el-form-item>
        <el-form-item v-show="isEdit" label="创建时间" prop="createTime">
          {{ form.createTime }}
        </el-form-item>
        <el-form-item v-show="isEdit" label="最后修改时间" prop="lastUpdateTime">
          {{ form.lastUpdateTime }}
        </el-form-item>
      </el-form>
      <div class="g-line"></div>
      <div class="footer-btn">
        <el-button type="primary" @click="resetForm">reset</el-button>
        <el-button type="primary">Save and add aother</el-button>
        <el-button type="primary" @click="saveOneBlog">Save</el-button>
      </div>

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