关于vue3:vue3elementplus使用记录

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