0


关于elementUI表单的清除验证以及复合型输入框

一、清除表单的验证

问题的发生以及解决过程

表单弹窗关闭后再打开会出现上一次的验证信息提示,影响使用。翻了翻文档,发现我们可以使用clearValidate()方法将验证信息移除。即每次监听弹窗的打开,一旦弹窗打开就清除,然而发现没有用T-T

然后想起了之前大佬教的试试延时使用,果不其然生效了!!

代码


watch: {
    bdFormVisible (val) { // 当弹窗打开时
      // 重置表单,清空校验信息
      this.$nextTick(() => {
        //  延时到下一帧才开始,也就是页面刚刚渲染结束!!
        this.$refs.newBd.clearValidate()
      })
    }
  }

总结

长记性了,下次在遇到函数没有跑的,延时试一试

二、复合型输入框——查询(前置和后置都有的)

问题的发生以及解决过程

当初是想要做一个查询的输入框,发现官方文档中有一个很合适,就直接复制粘贴了,然后就出现了问题——左侧的下拉选中以后无法显示 T -T。

然后我试了试有两种方式可以解决,第一种是就是基于官方文档的修改(就是没有注意一些小细节),slot就是文档上的prepend,然后设置select的宽度,如果整个搜索框觉得太长了,可以用.input-with-select(文档里的类型)设置宽度

第二种就是我没发现上面第一种的细节然后折腾出来的,第二种就是修改slot为prefix,然后更改select的宽度,并且将input的padding-left设置为select的宽度即可

代码

第一种

第一种
<el-input
 placeholder="请输入内容"
 v-model="select"
 class="input-with-select">
    <el-select v-model="selectLabel" slot="prepend" placeholder="请选择">
    <el-option v-for="item in optionSelect" :key="item.value" :label="item.text" 
        :value="item.value"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
</el-input>

/ps:  在data里的定义我就不写出来了/

style
 .el-select {
    width: 130px;
  }
  .input-with-select  {
    background-color: #fff;
    width: 50%;
  }

第二种

------第二种-------
<el-input
 placeholder="请输入内容"
 v-model="select"
 class="input-with-select">
    <el-select v-model="selectLabel" slot="prefix" placeholder="请选择">
    <el-option v-for="item in optionSelect" :key="item.value" :label="item.text"                 
      :value="item.value"></el-option>
     </el-select>
     <el-button slot="append" icon="el-icon-search"></el-button>
</el-input>

/ps:  在data里的定义我就不写出来了/

----style----
.el-select  {
    width: 130px;
}
.el-input {
    padding-left: 130px
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

展示

第一种

第二种


本文转载自: https://blog.csdn.net/feifei0987654321/article/details/126835571
版权归原作者 伊丝忒塔 所有, 如有侵权,请联系我们删除。

“关于elementUI表单的清除验证以及复合型输入框”的评论:

还没有评论