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' }],
},
}
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>
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就是不可以选择今天的
}
}
}
}
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>
- prop要动态绑定,并且用路径形式。
- form-item要单独绑定到对应的校验属性。
11.表单的清空
表单的清空是重置成初始值,比如:下拉选了两次,会重置成第一次的选值,所以建议用空对象赋值清空form={}
12.表单动态校验规则
表单某些项的校验与否依赖前置某项的值,那么可以监听前置项的值动态修改rules绑定数组,但修改rules时默认会触发一次校验,需要在form上配置validate-on-rule-change为false。