小火柴的博客笔记 小火柴的博客笔记
首页
学过的习
踩过的坑
想过的事
首页
学过的习
踩过的坑
想过的事
  • 学过的习

  • 想过的事

  • 踩过的坑

    • elementUI使用问题
      • 1、el-input无法输入的问题
      • 3、el-form校验问题
      • 4、封装下拉框传参问题
      • 5、el-input绑定点击事件
    • 待整理的坑
  • 前端
  • 踩过的坑
小火柴
目录

elementUI使用问题

# 1、el-input无法输入的问题

原因分析:

  • 1、el-form标签下的层级结构不统一 比如有el-form下面有的行加上了el-row,有的没有加上el-row,可能会导致输入框的内容无法输入。也就是要保证el-form-item上面的层级是一致的。

  • 2、页面加载的时候,未在data进行定义(会出现第一次输入无用,点击其他地方的时候显示) 主要是保证输入框绑定的值在data中提前定义好,或者调用$set 进行数据的双向绑定。

    ##/2、element-ui 的el-form的问题(回车默认提交) element-ui的el-form的中如果只有一个input框,当按下enter键时,会默认出发提交事件,刷新页面。
    解决办法:在el-form中加入@submit.native.prevent 来使提交后不刷新页面,从而解决这个问题

<el-form :model="test" size="mini" label-width=“70px” @submit.native.prevent>
.........
</el-form>



# 3、el-form校验问题

校验时发现就算输入框中有值,依旧会出现红色提示,无法校验成功。
解决办法:需要保证model内的对象初始化时,有需要校验的参数。并且要保证prop值正确

data(){
  return{
       submitData:{
              checkMan:'',
          }
    }
}



# 4、封装下拉框传参问题

封装element的下拉框时,发现将value的类型指定为String时,开启多选时会报错,指定Object时,单选时也会报错。
解决办法:prop传参应该设置为:value:[Array,String],避免获取不到想要的值

# 5、el-input绑定点击事件

1、在使用的时候,如果给整个输入框绑定一个点击事件,但是这个输入框不是必填,就会导致选择之后,无法删除 解决方案:单独给input框的图标绑定点击事件,不对整个输入框绑定点击事件。

2、type=number的时候,清除按钮会和数字增加的按钮重合 解决方案:使用suffix插槽,单独处理

想过的事
待整理的坑

← 想过的事 待整理的坑→

Theme by Vdoing | Copyright © 2021-2023 X match
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式