文章阅读

沉浸阅读完整内容

写文章

饿了么Plus组件+TS+Vue3如何使用表单重置

正在统计阅读人数 正在统计字数
登录收藏0
字号 100%

el-dialog组件关闭的时候清空表单内容,点击按钮也一样,改成点击事件就行了

1.引入FormInstance

import type { FormInstance } from 'element-plus'
const formRef = ref<FormInstance>()

2.定义一个空的ref挂载到el-dialog上面

let elm=ref(null)

3.绑定ref,此处的v-model用于控制是否显示弹窗 ,@closed是关闭弹窗的事件方法。

<el-dialog v-model="OrderQuery"  @closed="sta(formRef)" ref="elm">

</el-dialog>

4.model为表单对象,这里也要使用ref,其中的formRef是引入进来的包创建的,在el-form-item组件上绑定prop,值为你的表单内容。

<el-form :model="numberValidateForm" label-position="top"  ref="formRef">
     <el-form-item label="订单号" :label-width="formLabelWidth" prop="name">
       <el-input v-model="numberValidateForm.name" autocomplete="off"  placeholder="请输入订单编号" />
    </el-form-item>
</el-form>

5.触发关闭窗口回调

let sta = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

完整代码:去掉了多余的,留下了最重要的,方便观察

<el-form :model="numberValidateForm"  ref="formRef">
     <el-form-item  prop="name">
       <el-input v-model="numberValidateForm.name"/>
    </el-form-item>
</el-form>

<script lang="ts" setup>
//引入包
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()

const numberValidateForm = ref({
  name: '',
})

//关闭回调
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

推荐阅读

4 篇精选
文章 / 27JS三目运算比大小 文章 / 29商品计算 文章 / 28函数封装计算商品价格 文章 / 30求数组中最大值

发表评论

评论 0

还没有评论,欢迎留下第一条讨论。

分享精彩,传递价值

生成专属海报,分享你的文章,让更多人发现好内容

浏览器不支持 Canvas,无法生成海报。

每日签到

每天来这里,记录一点持续积累。

当前积分--积分
本月签到--
本月获得--积分
正在读取