Vue 3.0 element 中的 $refs 如何使用
Vue 3.0 中的DOM ref用法
在element-plus中文档中没有具体使用方法
3.0文档连接
https://www.vue3js.cn/docs/zh/guide/composition-api-template-refs.html
<template> <div> <el-form :model="data" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item style="text-align: right;"> <el-button icon="el-icon-edit" @click="upformdatafun()" type="primary">提交</el-button> <el-button icon="el-icon-refresh-right" @click="resetForm()">重置</el-button> </el-form-item> </el-form> </div> </template> <script> import { ref, reactive, onMounted, toRefs, watch } from "vue"; export default { name: "control", props: { title: { type: String } }, setup(props) { // const { title } = toRefs(props) // mounted onMounted(() => { // dom加载完成 }) const data = reactive({ name: 1 }); const ruleForm = ref(null) const upformdatafun = () => { ruleForm.value.validate((valid) => { if (valid) { alert('submit!') } else { console.log('error submit!!') return false } }) } const resetForm = () => { ruleForm.value.resetFields() } return { data, ruleForm, upformdatafun, resetForm } }, components: { }, } </script> <style scoped> </style>