table的render函数如下
render: (h, param) => {
if (header[item].ReadOnly) {
return h('span', param.row[param.column.key]);
} else {
return this.$createElement('Form', {
ref: `tableForm${param.row._index}_${param.column._index}`,
props: {
model: param.row,
'compare-model': this.tData[param.row._index]
},
on: {
'submit.native.prevent': () => {}
}
}, [h('FormItem', {
props: {
prop: item,
transfer: true, // 使此节点脱离父节点到body中
'valid-rules': validateFunc
}
}, [
h('Input', {
props: {
value: param.row[item]
},
})
])]);
}
}
问题详细描述:
现象1:不改变form校验节点的定位方式时
只能在单元格input边框报红,无法看到校验信息
原因
h-table组件单元格设置了overflow: hidden,校验信息超出单元格无法显示
现象2:设置校验节点position: fix
/deep/ .h-select-dropdown {
position: fixed !important;
top: unset !important;
left: unset !important;
margin-top: -10px;
}
当表格没有横向滚动条时,校验信息可以展示,而出现横向滚动后,滚动后的单元格错误校验信息不展示
原因
原因不明确,可能是因为此时定位针对table-body,当表格超出原宽度就会失效
现象3:给formItem设置transfer
表格出现横向滚动,错误校验信息也能正常展示,但是当表格位置变化,上方有盒子展开,表格位置下移时,错误校验信息不会随表格移动,而是固定在原处。
原因
添加transfer使得校验信息节点针对body固定定位
解决方案
给formItem设置transfer,同时在table盒子移动位置时,先隐藏提示信息,再重新校验显示提示信息
filterBtn() {
this.editFormList.forEach(item => {
this.$refs[`tableForm${item}`].resetValidayeTips();
});
this.filterComponent = true;
this.filterInfo.showBox = !this.filterInfo.showBox;
this.filterBtnText = this.filterInfo.showBox ? '收起筛选' : '展开筛选';
this.filterInfo.showExport = this.pageShow;
this.$nextTick(() => {
this.editFormList.forEach(item => {
this.$refs[`tableForm${item}`].validate();
});
});
},