element ui 实际使用问题_el-switch change拦截

1.table过滤

• table组件的过滤是当前页面数据过滤，过滤字段需要filters=[]和filter-method方法。
• 如果需要调接口并同时需要分页查询，需要在el-table根组件上加@filter-change方法，并同时在过滤字段上加column-key属性，以及去掉filter-method方法。
• 表头的勾选条件清空，this.$refs.tableName.clearFilter()。

2.form表单属性绑定

• 属性表单绑定对于特定的单词不会生效，比如：name等。
• 表单的清空值this.$refs.formName.resetFields()需要在form-item上添加prop属性。
• 表单的清除操作要放到方法的最后面，不然其他操作执行不了。
• 表单的手动清空操作有时会导致属性绑定失效，造成页面表单数据不能及时更新，需要给表单对象赋初始值；或者表单提交校验，手动赋值后仍校验报错为空，也是绑定失效。还可以用this.$set()方法设置绑定值。
• 表单校验配置rules中可以配置自定义方法。

data() {
    const maxAmountValidator = (rule, value, callback) => {
      if (value > this.detailData.waitVerifyAmount) {
        callback(new Error('不能超过待核销金额！'))
      }
    }

    return {
      detailData: {},
      diffList: [],
      visible: false,
      diffForm: { diffUuid: this.$route.query.diffUuid },
      rules: {
        verifyAmount: [
          { required: true, message: '请输入核销金额', trigger: 'blur' },
          { pattern: regExpMap.weight_unit.reg, message: '请输入最多两位小数数字' },
          { validator: maxAmountValidator, trigger: 'change' },
        ],
        verifyReason: [{ required: true, message: '请输入核销原因', trigger: 'blur' }],
      },
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3.table分页勾选

• 在table上绑定row-key=‘getRowKey’，在方法中返回row.id或其他唯一值。
• 在table上绑定section-change事件，记录勾选项。
• 在type='selection’的column上绑定reserve-selection=‘true’。

4.dialog开关

• 如果dialog开关参数与触发dialog方法在同一个vue，则右上角叉掉后可以正常打开。
• 如果dialog开关参数与触发dialog方法是父子级组件，由父组件传递开关参数，右上角叉掉则打不开，需要在关闭页面之前添加before-close手动修改开关参数。

5.switch拦截操作
switch只有change事件，且当触发时参数值已经改变，如果想中间添加弹确认框操作，可以手动在change事件中设置绑定值为相反值，手动控制恢复显示值，然后在弹窗的确认、取消操作中再次修改绑定值。

6.按钮的tooltip
按钮的tooltip在按钮disabled灰化时不显示。

7.upload组件类型限制

• accept属性，参数为字符串，如：“.jpg,.jpeg,.bmp”
• 文件上传组件的钩子函数如果需要传自己的参数，需要写成调用匿名函数的方式，并且把参数放在默认参数的后面。

<el-upload
  :show-file-list="false"
  :action="FILE_ACTION"
  :on-success="(res, file) => handleUpload(res, file, 'masterLogo')"
  accept=".JPG,.JPEG,.PNG,.BMP,.PDF"
>
  <el-image style="width: 96px; height: 96px" :src="configForm.masterLogo || masterDefault" />
</el-upload>
1
2
3
4
5
6
7
8

8.时间组件选择限制
选择日期时限制今天以前或以后可选，通过options的disabledDate方法来满足要求。

<el-date-picker
v-model="value"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions" />

data (){ 
   return {
     pickerOptions: { 
         disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
            //如果没有后面的-8.64e7就是不可以选择今天的 
         }
     }
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

9.switch组件显示
switch传入值只支持纯粹的boolean，其他间接类型转换的不适用，当你需要转换后端数据进行显示的时候，建议表单显示字段与后台字段设置两个，因为在表单提交时你还会转换一次数据，而数据的绑定会让页面显示略有问题。

10.表单的循环展示和校验
没有form-list,用v-for来循环form-item来实现表单组件的循环展示，

<el-row v-for="(item, index) in configForm.customFieldInfo" :key="index">
	<el-col style="width: 312px; margin-right: 8px">
	  <el-form-item :prop="`customFieldInfo.${index}.fieldKey`" label="企业名称" :rules="rules.fieldKey">
	    <el-select v-model="item.fieldKey" placeholder="请选择" v-if="!isView" @visible-change="handleChangeList">
	      <el-option v-for="item in activeList" :key="item.bankNum" :label="item.bankName" :value="item.bankNum" />
	    </el-select>
	    <span v-else>{{ item.fieldKey | renderBank(businessList) }}</span>
	  </el-form-item>
	</el-col>
</el-row>
1
2
3
4
5
6
7
8
9
10

• prop要动态绑定，并且用路径形式。
• form-item要单独绑定到对应的校验属性。

11.表单的清空
表单的清空是重置成初始值，比如：下拉选了两次，会重置成第一次的选值，所以建议用空对象赋值清空form={}

12.表单动态校验规则
表单某些项的校验与否依赖前置某项的值，那么可以监听前置项的值动态修改rules绑定数组，但修改rules时默认会触发一次校验，需要在form上配置validate-on-rule-change为false。