Vue-Element 手册

布局

栅格布局

• el-row和el-col可以搭配实现24格的栅格布局

• el-row支持如下属性

• el-col支持如下属性

栅格布局一般会根据实际的各个分辨率下的情况来设置每个布局的宽度，如果想要直接换行，也可以某一种分辨率之和超过24，这样只要两个col超过24就会换行，例如:

<el-row :gutter="24">
  <el-col :xs="20" :sm="6" :md="4" :lg="3" :xl="1"><div></div></el-col>
  <el-col :xs="20" :sm="6" :md="8" :lg="9" :xl="11"><div></div></el-col>
  <el-col :xs="20" :sm="6" :md="8" :lg="9" :xl="11"><div</div></el-col>
  <el-col :xs="20" :sm="6" :md="4" :lg="3" :xl="1"><div</div></el-col>
</el-row>

基于断点的隐藏类

• 如果想要实现在某些显示条件下将元素隐藏可以简单地使用以下的样式
  • hidden-xs-only - 当视口在 xs 尺寸时隐藏
  • hidden-sm-only - 当视口在 sm 尺寸时隐藏
  • hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
  • hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
  • hidden-md-only - 当视口在 md 尺寸时隐藏
  • hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
  • hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
  • hidden-lg-only - 当视口在 lg 尺寸时隐藏
  • hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
  • hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
  • hidden-xl-only - 当视口在 xl 尺寸时隐藏

<div hidden-xs-only></div>	<!--设置改组件在xs尺寸时隐藏-->

组件

form表单

• 表单自定义label/自定义空label，在使用表单时发现空label不能直接留空，可以在表单内部使用slot自定义空label或者在空label中添加空格:

  <label slot="label">&nbsp;</label>

• 一个el-form-item下包含多个字段的表单验证或者子组件中包含多个字段，可以在给子组件传递一个可以用于验证的prop，但是并不真正验证它，而是在编写自定义validator来进行多个字段的自定义验证，传递prop只是为了触发验证

<el-form-item :prop="`${formModelProp}`" :rules="{validator:customValidator}"></el-form-item>

• 如果想要一个form-item的验证错误提示覆盖一排的多个字段而不是超长后换行，可以在style里面直接修改错误提示的css属性让它不换行即可

• 表单验证相关方法:

  • 需要格外注意的是el-form-item的prop值不是简单的formData的字段名，对于数组型的字段，它可能需要定义为field2[0].name这样的形式，下标不能错

  • validate: 对整个表单的所有字段进行验证，回调函数有两个参数，分表表示校验是否成功和未通过校验的字段，例如

    this.$refs.myFormRef.validate(function (valid, errorObj) {
      console.log(valid)	// 是否成功
      console.log(errorObj) // 错误的字段的信息
    })
    
    // 其中errorObj是一个包含错误名和字段的对象，例如:
    {
      'field1': {
        'field': 'field1',
        'message': 'field 1 is empty'
      },
      'field2[0].name': {
        'field': 'field2[0].name',
        'message': 'field2[0].name is empty'
      }
    }

  • validateField: 对部分表单字段进行校验Function(prop: string, callback: Function(errorMessage: string))

  • resetFields: 对整个表单进行充值，将所有字段值重置为初始值并移除校验结果，常用于用于点击表单的取消按钮

  • clearValidate：移除表单的校验结果，传入的是待移除的表单项的prop属性组成的数组，如果不传则移除整个表单的校验结果。可以用它来在提交的时候取消部分表单的校验，比如有些对象如果所有字段都为空那么就不判断该表单，可以这样做:

    this.$refs.myFormRef.validate(function (valid, errorObj) {
      if (!valid) {
        Object.keys(errorObj).forEach (field => {
          const splits = field.split('[')
          const fieldName = splits[0]
          const index = parseInt(splits[1])
          if (!AllowdFieldNameArray.includes(fieldName)) {
            return true
          }
          const obj = isNaN(index) ? formData[fieldName] : formData[fieldName][index]
          if (Object.values(obj).some((item) => item)) {	// 如果该对象每个字段都不为空则表示没问题
            console.log('it\'s ok', field)
          } else {
            formRef.clearValidate(Object.keys(errorObj).filter((item) => item.split('.')[0] === field))
          }
        })
      }  
    })

dialog对话框

• el-dialog多重嵌套的时候，最好在子dialog上添加append-to-body属性，这样才能保证弹窗正常显示且遮罩层表现正常

TroubleShooting

• slider组件在小屏幕上离开焦点后tooltip却不消失: 这应该是一个已知的bug，可以这个issue下的解决方案:

  <el-slider @change="change" ref="timeSlider"> </el-slider>
  
  change(val){
    if (this.$refs["timeSlider"].$refs["button1"]) {
        this.$refs["timeSlider"].$refs["button1"].handleMouseLeave(); 	 
    }
    if (this.$refs["timeSlider"].$refs["button2"]) {
      this.$refs["timeSlider"].$refs["button2"].handleMouseLeave(); 
    }
  }

• 验证函数没有执行: 检查验证方法里面是否保证调用了callback方法的

• 去掉table的第三种状态(升序ascending、降序descending，这里要去掉的是默认无排序的状态null)： 需要这样设置，不过这样设置后，小箭头上依然会保留null的状态，这时候可以用pointer-event:none这个css属性将小箭头的事件屏蔽掉即可:

  <el-table :sort-orders="['ascending', 'descending']"></el-table>