x-extends / vxe-table

Vxe table 的表格组件
https://vxetable.cn
MIT License
7.6k stars 1.05k forks source link

多表头的在指定打印列的情况下表头不完整不正常 #1504

Open chiikin opened 3 years ago

chiikin commented 3 years ago

(必填)请填写问题描述或截图:

多表头的在指定打印列的情况下表头不完整不正常

在调试过程中发现问题发生在mixin.js文件的_default.methods._exportData方法下,具体出现问题的代码片段如下:

      if (customCols) {
        groups = _xeUtils.default.searchTree(_xeUtils.default.mapTree(customCols, function (item) {
          var targetColumn;

          if (item) {
            if (_tools.UtilTools.isColumn(item)) {
              targetColumn = item;
            } else if (_xeUtils.default.isString(item)) {
              targetColumn = _this.getColumnByField(item);
            } else {
              var colid = item.id || item.colId;
              var _type = item.type;
              var field = item.property || item.field;

              if (colid) {
                targetColumn = _this.getColumnById(colid);
              } else if (field && _type) {
                targetColumn = tableFullColumn.find(function (column) {
                  return column.property === field && column.type === _type;
                });
              } else if (field) {
                targetColumn = _this.getColumnByField(field);
              } else if (_type) {
                targetColumn = tableFullColumn.find(function (column) {
                  return column.type === _type;
                });
              }
            }

            return targetColumn || {};
          }
        }, {
          children: 'childNodes',
          mapChildren: '_children'
        }), function (column, index) {
          return _tools.UtilTools.isColumn(column) && (!columnFilterMethod || columnFilterMethod({
            column: column,
            $columnIndex: index
          }));
        }, {
          children: '_children',
          mapChildren: 'childNodes',
          original: true
        });
      } else {
        groups = _xeUtils.default.searchTree(isGroup ? tableGroupColumn : tableFullColumn, function (column, index) {
          return column.visible && (!columnFilterMethod || columnFilterMethod({
            column: column,
            $columnIndex: index
          }));
        }, {
          children: 'children',
          mapChildren: 'childNodes',
          original: true
        });
      } // 获取所有列

/// .... 其他代码

      opts.columns = cols;
      opts.colgroups = convertToRows(groups);

如上代码中自定义打印列时customCols为true,然后在构建groups变量时树状结构丢失,实际应该给columnInfo.childNodes的赋值还留在columnInfo.children,导致convertToRows(groups)方法构建多表头时无法正确识别分组表头的子表头

(必填)请填在线链接: https://codesandbox.io/s/vxe-table-3-x-vue-2-6-wen-ti-yan-shi-forked-6ctki

(必填)请填写期望的结果: 1、希望指定自定义打印的多表头时,打印出来的多表头样式正常,没有错位和缺失 2、更新文档,增加多表头下自定义打印列的 方法: print(options) columns 的范例

(必填)请填写以下信息:

i7eo commented 2 years ago

把export源码clone到项目中,自己改。手动把children挂到childNodes上😂