amis@3.3.0 table 嵌套从第3级开始显示错位

jckbn6z7 于 2个月前发布在其他

关注(0)|答案(3)|浏览(53)

描述问题：

table多层嵌套时，只有1-2层显示相对正常（但相比以前也是缺少了层级递进的效果），到了3层以上的时候就严重错位了

截图或视频：

如何复现（请务必完整填写下面内容）：

你是如何使用 amis 的？
npm
amis 版本是什么？请先在最新 beta 版本测试问题是否存在
3.3.0
粘贴有问题的完整 amis schema 代码：

{
  "type": "page",
  "body": {
    "type": "service",
    "data": {
      "rows": [
        {
          "engine": "Trident",
          "browser": "Internet Explorer 4.0",
          "platform": "Win 95+",
          "version": "4",
          "grade": "X",
          "id": 1,
          "children": [
            {
              "engine": "Trident",
              "browser": "Internet Explorer 4.0",
              "platform": "Win 95+",
              "version": "4",
              "grade": "X",
              "id": 1001,
              "children": [
                {
                  "engine": "Trident",
                  "browser": "Internet Explorer 4.0",
                  "platform": "Win 95+",
                  "version": "4",
                  "grade": "X",
                  "id": 100101,
                  "children": [
                    {
                      "engine": "Trident",
                      "browser": "Internet Explorer 4.0",
                      "platform": "Win 95+",
                      "version": "4",
                      "grade": "X",
                      "id": 10010101
                    },
                    {
                      "engine": "Trident",
                      "browser": "Internet Explorer 5.0",
                      "platform": "Win 95+",
                      "version": "5",
                      "grade": "C",
                      "id": 10010102
                    }
                  ]
                },
                {
                  "engine": "Trident",
                  "browser": "Internet Explorer 5.0",
                  "platform": "Win 95+",
                  "version": "5",
                  "grade": "C",
                  "id": 100102
                }
              ]
            },
            {
              "engine": "Trident",
              "browser": "Internet Explorer 5.0",
              "platform": "Win 95+",
              "version": "5",
              "grade": "C",
              "id": 1002
            }
          ]
        }
      ]
    },
    "body": [
      {
        "type": "table",
        "source": "$rows",
        "className": "m-b-none",
        "columnsTogglable": false,
        "columns": [
          {
            "name": "engine",
            "label": "Engine"
          },
          {
            "name": "grade",
            "label": "Grade"
          },
          {
            "name": "version",
            "label": "Version"
          },
          {
            "name": "browser",
            "label": "Browser"
          },
          {
            "name": "id",
            "label": "ID"
          },
          {
            "name": "platform",
            "label": "Platform"
          }
        ]
      }
    ]
  }
}

操作步骤
在github.io和国内镜像的文档中直接粘贴上面schema即可呈现差异

amis

来源：https://github.com/baidu/amis/issues/7843

3条答案

按热度按时间

prdp8dxp1#

赞(0）回复(0）举报 2个月前

v1uwarro2#

发现新的样式错误：
当开启了selectable后，线也会有偏移，如图：

{
  "type": "page",
  "body": {
    "type": "service",
    "data": {
      "rows": [
        {
          "engine": "Trident",
          "browser": "Internet Explorer 4.0",
          "platform": "Win 95+",
          "version": "4",
          "grade": "X",
          "id": 1,
          "children": [
            {
              "engine": "Trident",
              "browser": "Internet Explorer 4.0",
              "platform": "Win 95+",
              "version": "4",
              "grade": "X",
              "id": 1001,
              "children": [
                {
                  "engine": "Trident",
                  "browser": "Internet Explorer 4.0",
                  "platform": "Win 95+",
                  "version": "4",
                  "grade": "X",
                  "id": 100101,
                  "children": [
                    {
                      "engine": "Trident",
                      "browser": "Internet Explorer 4.0",
                      "platform": "Win 95+",
                      "version": "4",
                      "grade": "X",
                      "id": 10010101
                    },
                    {
                      "engine": "Trident",
                      "browser": "Internet Explorer 5.0",
                      "platform": "Win 95+",
                      "version": "5",
                      "grade": "C",
                      "id": 10010102
                    }
                  ]
                },
                {
                  "engine": "Trident",
                  "browser": "Internet Explorer 5.0",
                  "platform": "Win 95+",
                  "version": "5",
                  "grade": "C",
                  "id": 100102
                }
              ]
            },
            {
              "engine": "Trident",
              "browser": "Internet Explorer 5.0",
              "platform": "Win 95+",
              "version": "5",
              "grade": "C",
              "id": 1002
            }
          ]
        }
      ]
    },
    "body": [
      {
        "type": "table",
        "source": "$rows",
        "className": "m-b-none",
        "columnsTogglable": false,
        "selectable": true,
        "multiple": true,
        "columns": [
          {
            "name": "engine",
            "label": "Engine"
          },
          {
            "name": "grade",
            "label": "Grade"
          },
          {
            "name": "version",
            "label": "Version"
          },
          {
            "name": "browser",
            "label": "Browser"
          },
          {
            "name": "id",
            "label": "ID"
          },
          {
            "name": "platform",
            "label": "Platform"
          }
        ]
      }
    ]
  }
}

赞(0）回复(0）举报 2个月前

6psbrbz93#

临时解决方案，增加scss样式补丁：

@use 'sass:math';
$ns: 'cxd-';

@function px2rem($pixels, $context: 16px) {
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }
  @if (unitless($context)) {
    $context: $context * 1px;
  }
  @return math.div($pixels, $context) * 1rem;
}

/**
* 表格嵌套样式补丁
*/
.#{$ns}Table-table > tbody > tr {
  // 第一层展开后的竖线位置
  &.#{$ns}Table-tr--1th > td.#{$ns}Table-checkCell + td.#{$ns}Table-expandCell::before {
    left: px2rem(17px);
  }

  @for $i from 2 through 10 {
    &.#{$ns}Table-tr--#{$i}th {
      // 第一个内容单元格的 padding-left 递进，体现层次关系
      > td.#{$ns}Table-expandCell + td {
        padding-left: calc(
          px2rem(17px) + px2rem(18px) * ($i - 2) + var(--TableCell-paddingX)
        );
      }

      // 打开selectable后位置会偏移
      > td.#{$ns}Table-checkCell + td.#{$ns}Table-expandCell {
        // 第二层及以后的展开后的竖线位置
        &::before {
          left: px2rem(17px) + px2rem(18px) * ($i - 1);
        }

        // 第三层及以后的展开后的横线和竖线位置
        > .#{$ns}Table-divider3,
        > .#{$ns}Table-divider2 {
          left: px2rem(17px) + px2rem(18px) * ($i - 2);
        }
      }
      // 横线长度
      > td > .#{$ns}Table-divider2 {
        width: px2rem(18px);
      }
    }
  }

  // 三层以后填补前面的竖线
  @for $i from 1 through 7 {
    > td.#{$ns}Table-checkCell + td.#{$ns}Table-expandCell > .#{$ns}Table-divider-#{$i} {
      left: px2rem(17px) + px2rem(18px) * ($i - 1);
    }

    > td.#{$ns}Table-expandCell > .#{$ns}Table-divider-#{$i} {
      left: px2rem(23px) + px2rem(18px) * ($i - 1);
    }
  }
}

赞(0）回复(0）举报 2个月前

我来回答

amis@3.3.0 table 嵌套从第3级开始显示错位

描述问题：

截图或视频：

如何复现（请务必完整填写下面内容）：

3条答案

相关问题

热门标签

最新问答