【无标题】

最新推荐文章于 2024-09-13 14:34:15 发布

ting_cute

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量483

点赞数

分类专栏： element 文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/ting_cute/article/details/122359816

版权

element 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

input在使用中遇到的坑

1.element input点击展示弹窗选值后,表单验证还有提示的解决方法
问题描述：
用例：

			<el-form-item
                label="xxxx:"
                prop="name"
              >
                <el-input
                  placeholder="请选择xxxx"
                  v-model="form.name"
                  @click.native="selectOrg"
                  clearable
                >
                </el-input>
              </el-form-item>

在这里插入图片描述

input有值了，但是验证提示还想存在
在这里插入图片描述

解决办法：在自定义验证方法

<script>
data(){
const validatetName = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请选择xxxx"));
      } else {
        callback();
      }
    }
return{
rules:{
  name: [{required: true,validator: validatetName ,trigger: ["blur", "change"],}],
}
}
}
</script>

这样就可以啦
2.在查询的时候使用input出现不能输入的情况，是因为input不能实时更新

<template>
<div>
<el-form>
	<el-form-item label="xxx类型:" prop="type">
       <el-select v-model="form.type" @change="change($event)">
            <el-option
              	 v-for="item in types"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
                  >
              </el-option>
           </el-select>
     </el-form-item>
    <el-form-item label="xxxx:" prop="name">
       <el-input v-model="form.name" placeholder="" @input="change($event)"></el-input>
    </el-form-item>
</el-form>
</div>
<template>
<scritp>
methods:{
/**解决有时候el-input无法输入的问题 */
      change(e) {
        this.$forceUpdate()
      },

}
</script>