原生html + vue3 获取引用元素refs - elementUI如何在setup中进行表单校验设置

背景:

原生Html 引入elementPlust + vue3 ,需要在vue3 setup里做表单校验,通过el-form ref='form' 的refs元素执行校验。

解决方案1:

保存vue挂载之后实例vm为一个常量,由实例来获取:vm.$refs.form.validate()获取校验结果

最终效果:

提交时,检验结果展示

html源码

复制代码
<!DOCTYPE html>
<html>
<!--带搜索输入框下拉弹窗
-->
<head>
  <meta charset="UTF-8">
  <!-- import Vue before Element -->
  <script src="../js/vue3.3.8/vue.global.js"></script>
  <link rel="stylesheet" href="../js/elementPlus/index.css">
  <script src="../js/elementPlus/index.full.js"></script>
  <title></title>

</head>
<body>
<div id="app">
  <!-- 双大括号语法,可以直接拿到下面data中return 里面的数据 -->

  <el-button type="success" @click="onsubmit">保存按钮</el-button>

  <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px" class="demo-ruleForm"
           status-icon>
    <div class="section-header">
      商品信息
      <el-checkbox label="自动" size="large" checked></el-checkbox>
    </div>
    <el-row>
      <el-col :span="9">
        <el-form-item label="商品名称" prop="name">
          <el-input placeholder="商品名称长度必须小于20" v-model="formData.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="商品编码" prop="code">
          <el-input placeholder="系统自动生成" v-model='formData.code'></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-divider></el-divider>

  </el-form>

</div>
</body>

<script>
  const {createApp, ref, reactive} = Vue
  const {ElMessageBox} = ElementPlus

  const app = createApp({
    setup() {
      const message = ref('Hello vue!')
      const formData = ref({name: '', code: ''})
      const rules = reactive({
        name: [{required: true, trigger: 'blur'}],
        code: [{required: true, trigger: 'blur'}],
      })
      const onsubmit = (e) => {
        console.log(vm.$refs.ruleFormRef)
        vm.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            alert('校验成功')
          } else {
            alert('失败')
          }
        })
      }

      return {
        message, formData, rules, onsubmit,
        change: (e) => {
          console.log('修改值', e)
        }
      }
    },
    created() {
    },
    mounted() {
      console.log('|--mounted', this)
    }
  })
  app.use(ElementPlus)
  const vm = app.mount('#app')
</script>
</html>

这里一开始获取ruleFormRef这个表单对象,用this获取不到

const vm = app.mount('#app')

因为这句话,最后歪打正着,通过vm这个实例,获取:vm.$refs.ruleFormRef.validate()得到检验结果。

解决方案2

挂载完成,将$refs.form对象赋值给一个setup中创建的响应式变量:

复制代码
const ruleFormRefElement = ref('')
mounted() {
  this.ruleFormRefElement = this.$refs.ruleFormRef
}

这样,只要保证,setup中需要用的地方是挂载完成之后的动作去使用:ruleFormRefElement 它即可。

效果:

html源码

复制代码
<!DOCTYPE html>
<html>
<!--带搜索输入框下拉弹窗
-->
<head>
  <meta charset="UTF-8">
  <!-- import Vue before Element -->
  <script src="../js/vue3.3.8/vue.global.js"></script>
  <link rel="stylesheet" href="../js/elementPlus/index.css">
  <script src="../js/elementPlus/index.full.js"></script>
  <title></title>

</head>
<body>
<div id="app">
  <!-- 双大括号语法,可以直接拿到下面data中return 里面的数据 -->

  <el-button type="success" @click="onsubmit">保存按钮</el-button>

  <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px" class="demo-ruleForm"
           status-icon>
    <div class="section-header">
      商品信息
      <el-checkbox label="自动" size="large" checked></el-checkbox>
    </div>
    <el-row>
      <el-col :span="9">
        <el-form-item label="商品名称" prop="name">
          <el-input placeholder="商品名称长度必须小于20" v-model="formData.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="商品编码" prop="code">
          <el-input placeholder="系统自动生成" v-model='formData.code'></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-divider></el-divider>

  </el-form>

</div>
</body>

<script>
  const {createApp, ref, reactive} = Vue
  const {ElMessageBox} = ElementPlus

  const app = createApp({
    setup() {
      const message = ref('Hello vue!')
      const formData = ref({name: '', code: ''})
      const rules = reactive({
        name: [{required: true, trigger: 'blur'}],
        code: [{required: true, trigger: 'blur'}],
      })

      const ruleFormRefElement = ref('') //用一个变量来保存$refs元素,在挂载完成时赋值(mounted),这样在setup中就可以方便操作表单校验结果检查:ruleFormRef
      const onsubmit = (e) => {
        ruleFormRefElement.value.validate(valid => { //表单验证
          if (valid) {
            alert('提交校验:成功')
          } else {
            alert('提交校验:失败')
          }
        })
      }

      return {
        message, formData, rules, onsubmit,
        change: (e) => {
          console.log('修改值', e)
        }, ruleFormRefElement,
      }
    },
    created() {
    },
    mounted() {
      console.log('|--mounted', this.$refs)
      this.ruleFormRefElement = this.$refs.ruleFormRef
      console.log('|--mounted,this.ruleFormRefElement', this.ruleFormRefElement)
    }
  })
  app.use(ElementPlus)
  const vm = app.mount('#app')
</script>
</html>

相关:

在vue3项目嵌套 导入老项目 jQuery项目,减少重复开发-CSDN博客

相关推荐
杨超越luckly4 小时前
HTML应用指南:利用POST请求获取全国索尼体验型零售店位置信息
前端·arcgis·html·数据可视化·门店数据
会飞的小菠菜14 小时前
快速将多个PPT、PPTX幻灯片统一转换成浏览器能直接打开的HTML网页文件
html·powerpoint·浏览器·ppt·格式转换·网页
L李什么李20 小时前
HTML——使用表格制作简历
前端·javascript·html
我有一棵树21 小时前
html 滚动条相关开发经验总结
前端·javascript·html
How_doyou_do1 天前
样式冲突修复组件
前端·javascript·html
我有一棵树1 天前
如何优雅的布局,height: 100% 的使用和 flex-grow: 1 的 min-height 陷阱
前端·css·html
上单带刀不带妹1 天前
Vue3 全局 API 转移详解
前端·javascript·vue.js·vue3·api
余防2 天前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
β添砖java2 天前
CSS定位布局
前端·css·html
豆豆豆大王2 天前
HTML 与 JavaScript 结合 “点击按钮弹出提示” 的交互功能
javascript·html·交互