elementUi相关问题（及循环表单验证）_element ui多选框循环校验

目录

• • • 1. Elementui蓝色阴影边框相关问题的解决方案(el-upload 上传文件，去掉默认动画效果)
    • 2. Element循环表单验证
    • 3. Form下面只有一个 input 时回车键刷新页面
    • 4. type="number"去除输入框聚焦时的上下箭头
    • 4.el-input输入框使用oninput或onkeyup后，v-model双向绑定失效问题
    • 5.el-input当type='number'时，输入小数，获取的数据为String类型
    • 6.el-input当type='number'时,会存在上下箭头，需要清除
    • 7.使用el-select 不能继承父元素的宽度
    • 8.element走马灯 autoplay='false' 取消自动播放 失败
    • 9.DropDown组件使用时，子选项无法绑定事件的处理
    • 10.Vue键盘回车事件
    • 11.form 下面只有一个 input 时回车键刷新页面
    • 12.表格固定列最后一行显示不全
    • 13.气泡确认框文档里的confirm事件不生效
    • 14.只校验表单其中一个字段
    • 15.弹窗重新打开时表单上次的校验信息未清除
    • 16.表头与内容错位
    • 17.表格跨分页多选

1. Elementui蓝色阴影边框相关问题的解决方案(el-upload 上传文件，去掉默认动画效果)

• 1.Tabs标签页出现蓝色阴影边框解决方案

  .el-tabs__item:focus.is-active.is-focus:not(:active) {
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
  }
  .el-tabs__item,.el-tabs__item:focus,.el-tabs__item:focus-visible{
  outline: transparent auto 0px !important;
  }
  1
  2
  3
  4
  5
  6
  7

• 2.el-button-radio出现蓝色阴影边框解决方案

  .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
  }
  .el-radio-button,.el-radio-button:focus,.el-radio-button:focus-visible{
  outline: transparent auto 0px !important;
  }
  1
  2
  3
  4
  5
  6
  7

• 3.el-dropdown 下拉菜单出现蓝色阴影边框解决方案

  .el-dropdown-link,.el-dropdown-link:focus,.el-dropdown-link:focus-visible {
      outline: transparent auto 0px !important;
  }
  1
  2
  3

• 4.el-upload 上传文件，去掉默认动画效果。

      .el-upload-list__item{
         transition:none !important;
         -webkit-transition:nonne !important;
    }
    .el-upload-list__item-name{
         transition:none !important;
         -webkit-transition:nonne !important;
    }
  1
  2
  3
  4
  5
  6
  7
  8

2. Element循环表单验证

• 1.表单格式

  如果form表单里面的数据存在数组循环，那么我们又通过rules验证,那么就需要循环表单（如下）

  <template>
      <div>
          <el-form ref='formCase' label-width="150px" :model="fromList" :rules="fromeRules">
              <div v-for="(itemList,index) in fromList.valueArray" :key="index">
                  <el-form-item label="测试一" :prop="'valueArray.'+index+'.value1'" :rules="fromeRules.adName">
                      <el-input v-model="itemList.value1" :placeholder="测试一"></el-input>
                  </el-form-item>
              <div>
          </el-form>
          <button @click='clickBtn'></button>
      </div>
  </template>
  <script>
  export default {
      data() {
      	const customRules= (rule, value, callback) => {
  	      if (!value || value.length == 0 || value=='') {
  	      	//可以判断校验是否显示
  	        this.isCustomRulesError= true
  	        callback(new Error(rule.message))
  	      } else {
  	        //可以判断校验是否显示
  	        this.isCustomRulesError= false
  	        callback()
  	      }
  	    }
          return {
              fromList:{
                  valueArray:[
                      {
                          value1:'xxx'
                      },
                      {
                          value1:'xxx'
                      },
                  ]
              },
              fromeRules:{
                  adName: {
                      required: true,
                      message: '此项不能为空',
                      trigger: 'blur'
                  },
                  customRules: {
  		          required: true,
  		          message: '此项不能为空',
  		          trigger: 'change',
  		          validator: customRules
  		        }
              },
              isCustomRulesError:false
          }
      },
      methods:{
          clickBtn() {
              this.$refs['formCase'].validate((valid) => {
  
              })
          }
      }
  }
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62

• 2.首先我们需要循环数组，实现表单循环

  <div v-for="(itemList,index) in fromList.valueArray" :key="index">
      <el-form-item label="测试一" :prop="'valueArray.'+index+'.value1'" :rules="fromeRules.adName">
          <el-input v-model="itemList.value1" :placeholder="测试一"></el-input>
      </el-form-item>
  <div>
  1
  2
  3
  4
  5

• 3.然后我们需要在prop时使用数组名称+index+具体参数,同时rules规则需要单独配置，接着v-model需要双向绑定对应的值

• 4.最后，valueArray这个最好是一开始就有一组默认为空的数组，否则双向绑定、验证会失败，如果需要动态新增可以使用this.fromList.valueArray.push(this.$options.data.call(this).fromList.valueArray[0])

  fromList:{
      valueArray:[
          {
              value1:'xxx',//默认的
          },
      ]
  },
  1
  2
  3
  4
  5
  6
  7

3. Form下面只有一个 input 时回车键刷新页面

需要使用`@keyup.enter.native`
1

  <el-input v-model="itemList.value1" :placeholder="测试一"  @keyup.enter.native="enterInput"></el-input>
1

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

<template>
        <div>
            <el-input v-model="itemList.value1" type="number" :placeholder="测试一" class='clear-number-input'></el-input>
        </div>
    </template>
    <style>
        /* 设置全局 */
        .clear-number-input.el-input::-webkit-outer-spin-button,
        .clear-number-input.el-input::-webkit-inner-spin-button {
        margin: 0;
        -webkit-appearance: none !important;
        } 
        .clear-number-input.el-input input[type="number"]::-webkit-outer-spin-button,
        .clear-number-input.el-input input[type="number"]::-webkit-inner-spin-button {
        margin: 0;
        -webkit-appearance: none !important;
        }
        .clear-number-input.el-input {
        -moz-appearance: textfield;
        } 
        .clear-number-input.el-input input[type="number"] {
        -moz-appearance: textfield;
        }
   </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.el-input输入框使用oninput或onkeyup后，v-model双向绑定失效问题

• 原因：当使用oninput或者onkeyup验证输入的内容，比如：验证数字时，输入框立即输入字母，这时输入框会清空，同时v-model双向绑定失效问题
• 解决办法：可以用blur手动给绑定的值赋值。

   <el-input
	v-model="form.price"
	clearable
	placeholder="请输入价格"
	onkeyup="value=value.replace(/[^0-9]/g,'')"
	@blur="form.price = $event.target.value"
></el-input>
1
2
3
4
5
6
7

5.el-input当type='number’时，输入小数，获取的数据为String类型

• 解决办法 v-model.number

 <el-input
	v-model.number="form.price"
    type='number'
	clearable
	placeholder="请输入价格"
></el-input>
1
2
3
4
5
6

6.el-input当type='number’时,会存在上下箭头，需要清除

• 解决办法:设置 -webkit-inner-spin-button->-webkit-appearance: none !important;

input[type="number"]::-webkit-outer-spin-button,::-webkit-inner-spin-button{
    margin: 0;
    -webkit-appearance: none !important;
}
.el-input,.el-input input[type="number"] {
    -moz-appearance: textfield;
}
1
2
3
4
5
6
7

7.使用el-select 不能继承父元素的宽度

• 原因：el-select 本身是 inline-block
• 解决办法：给el-select 元素加行内 控制其宽度。

 <el-form-item label="选择"style="width:300px">
    <el-select v-model="from.select" placeholder="请选择" multiple style="width:100%">
    </el-select>
</el-form-item>
1
2
3
4

8.element走马灯 autoplay=‘false’ 取消自动播放 失败

• 解决办法：interval设置为0,也可以取消自动播放

<el-carousel interval='0' height="150px">
    <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
</el-carousel>
1
2
3
4
5

9.DropDown组件使用时，子选项无法绑定事件的处理

• 解决办法：使用DropDown组件绑定点击事件时，需要加 .native 才能绑定成功，即 @click.native=‘fun’

<el-dropdown-menu slot="dropdown">
    <el-dropdown-item  @click.native='fun(1)'>黄金糕</el-dropdown-item>
    <el-dropdown-item  @click.native='fun(2)'>狮子头</el-dropdown-item>
    <el-dropdown-item  @click.native='fun(3)'>螺蛳粉</el-dropdown-item>
</el-dropdown-menu>
1
2
3
4
5

10.Vue键盘回车事件

• 原因：element-ui把input进行了封装，原事件就不起作用了
• 解决办法：使用@keyup.enter就可以

<input v-model="form.name" placehoder="昵称" @keyup.enter="submit">
<el-input v-model="form.name" placehoder="昵称" @keyup.enter.native="submit"></el-input>
1
2

11.form 下面只有一个 input 时回车键刷新页面

• 原因:触发了表单默认的提交行为
• 解决办法:el-form 加上@submit.native.prevent就行了

<el-form inline @submit.native.prevent>
  <el-form-item label="昵称">
    <el-input
      v-model="from.name"
      :placeholder="输入"
      clearable
      @keyup.enter.native="enterInput"
    />
  </el-form-item>
</el-form>
1
2
3
4
5
6
7
8
9
10

12.表格固定列最后一行显示不全

• 原因：这种情况有时在宽度刚好处于临界值状态时会出现。因为固定列是独立于表格body动态计算高度的，出现了固定列高度小于表格高度所以造成最后一行被遮挡。

.el-table__fixed-right {
  height: 100% !important;
}

1
2
3
4

13.气泡确认框文档里的confirm事件不生效

• 原因：某些版本使用的是onConfirm、onCancel
• 解决办法:将confirm改为onConfirm

<el-popover @onConfirm="">
</el-popover>
1
2

14.只校验表单其中一个字段

this.$refs['form'].validateField('name', valid => {
  if (valid) {
    //提交
  }
})

1
2
3
4
5
6

15.弹窗重新打开时表单上次的校验信息未清除

• 解决办法:重置表单

<el-dialog @close="onClose">
  <el-form ref="form">
  </el-form>
</el-dialog>

// 弹窗关闭时重置表单
onClose() {
  this.$refs['form'].resetFields()
}
1
2
3
4
5
6
7
8
9

16.表头与内容错位

// 全局设置
.el-table--scrollable-y .el-table__body-wrapper {
 overflow-y: overlay !important;
}

1
2
3
4
5

17.表格跨分页多选

• 解决办法:只需加上row-key和reserve-selection即可

<el-table row-key="id">
  <el-table-column type="selection" reserve-selection></el-table-column>
</el-table>

1
2
3
4