element-ui dialog弹出框嵌套遮罩问题

  • 加上 :modal-append-to-body=’false’和 :append-to-body=”true”就会解决弹出框嵌套阴影最上层的问题

  • 以及关闭嵌套弹窗遮罩层不消失的问题

    1. <el-dialog  :modal-append-to-body='false' :append-to-body="true">

    vue的element-ui中form清除验证找不到clearValidate、resetFields

  • 在做表格增删改查中时常要在弹窗上用到form表单验证，第一次点击报错undefined

  • 问题出现在刷新界面后第一次新增，此时表单内的dom还没有加载完成就执行了clearValidate导致报错
  • 解决办法this.$nextTick 但是this.$nextTick会造成新增或者编辑的时候做的参数处理出现问题、新增不会清空表单，编辑的值一直是第一次选中行的数据
  • 放到this.$nextTick内部问题解决 ```javascript addDialog(){ this.fromType = ‘add’; this.dialogTit = ‘新增’; //清空表单 for (let x in this.form) {
    1.    if(x =='parentIds'){
    2.        this.form[x] = []
    3.    }else{
    4.        this.form[x] = ''
    5.    }
    }; this.$nextTick(()=>{
    1.   //清除验证规则
    2.   this.$refs.form.clearValidate();
    }) //显示弹框 this.dialogFormVisible = true; },
  1. > - 这种操作会影响编辑的时候数据不能动态渲染 将赋值操作都放到this.$nextTick中处理即可
  4. <a name="nZGzZ"></a>
  5. ### el-input number类型禁止输入'e'和'.'、'+'、'-'、'Shift'
  6. ```vue
  7.  <el-input size="medium"  
  8.            type="number"
  9.            @keydown.native="channelInputLimit">
  1.   channelInputLimit (e) {
  2.                 let key = e.key
  3.                 console.log(key);
  4.                 // 不允许输入'e'和'.'
  5.                 if (key === 'e' || key === '.'|| key === '-') {
  6.                     e.returnValue = false
  7.                     return false
  8.                 }
  9.                 return true
  10.             },

去除type=”number”输入框聚焦时的上下箭头

  1. * 设置全局 */
  2. .clear-number-input.el-input::-webkit-outer-spin-button,
  3. .clear-number-input.el-input::-webkit-inner-spin-button {
  4.   margin: 0;
  5.   -webkit-appearance: none !important;
  6. } 
  7. .clear-number-input.el-input input[type="number"]::-webkit-outer-spin-button,
  8. .clear-number-input.el-input input[type="number"]::-webkit-inner-spin-button {
  9.   margin: 0;
  10.   -webkit-appearance: none !important;
  11. }
  12. .clear-number-input.el-input {
  13.   -moz-appearance: textfield;
  14. } 
  15. .clear-number-input.el-input input[type="number"] {
  16.   -moz-appearance: textfield;
  17. }

只验证表单一个字段

  • 如果需要多个参数，将参数改为数组形式即可。

    1. this.$refs['form'].validateField('mobile', valid => {
    2. if (valid) {
    3.   // 发送验证码
    4. }
    5. })

    清除表单验证

    1. this.$refs['form'].resetFields()

    el-cascader 选择后需要点击空白处才能关闭

  • 级联选择器在设置为可选任意一级时，选定某个选项时需要手动点击空白处才能关闭。

  • 解决办法：可在 change 事件触发时将其关闭 ```el-cascader ref="cascader" @change="onChange" /

onChange() { this.$refs[‘cascader’].dropDownVisible = false } ```