table表格中嵌入form表单,校验错误提示信息无法展示

461 阅读1分钟

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();
    });
  });
},