baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.32k stars 2.51k forks source link

flex布局组件,一行2列模式下,第一个flex里的表格开启了内容自适应,内容无法填充满 #10981

Open xiukun opened 1 month ago

xiukun commented 1 month ago

描述问题:

使用flex布局组件,一行2列模式下,第一个flex里的表格开启了内容自适应,内容无法填充满,第二个却可以。 我想一行2列 flex布局和分栏 都不好用,还有其他方式能正常展示么

截图或视频:

346308f68ae5b1be0e0fa51a3475b573

如何复现(请务必完整填写下面内容):

  1. 你是如何使用 amis 的? amis@6.8.0,低版本也存在这个问题

  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在

  3. 粘贴有问题的完整 amis schema 代码:

    {
    "type": "page",
    "title": "Simple Form Page",
    "regions": [
    "body"
    ],
    "body": [
    {
      "type": "flex",
      "items": [
        {
          "type": "container",
          "body": [
            {
              "type": "crud",
              "syncLocation": false,
              "api": {
                "method": "get",
                "url": "https://apifoxmock.com/m1/3546534-2258203-default/common/list",
                "requestAdaptor": "",
                "adaptor": "",
                "messages": {}
              },
              "bulkActions": [],
              "itemActions": [],
              "filterSettingSource": [
                "name",
                "age",
                "date",
                "id",
                "address",
                "enable",
                "image",
                "imageList",
                "imgsList"
              ],
              "id": "u:7c7e6e81eb6d",
              "perPageAvailable": [
                5,
                10,
                20,
                50,
                100
              ],
              "messages": {},
              "autoFillHeight": true,
              "columns": [
                {
                  "label": "name",
                  "type": "text",
                  "name": "name",
                  "id": "u:e645296b7f6a"
                },
                {
                  "label": "age",
                  "type": "text",
                  "name": "age",
                  "id": "u:3aa128affa56"
                },
                {
                  "label": "date",
                  "type": "text",
                  "name": "date",
                  "id": "u:087b5befb2de"
                },
                {
                  "label": "id",
                  "type": "text",
                  "name": "id",
                  "id": "u:590f994127af"
                },
                {
                  "label": "address",
                  "type": "text",
                  "name": "address",
                  "id": "u:92a5e3ffa9cd"
                },
                {
                  "label": "enable",
                  "type": "text",
                  "name": "enable",
                  "id": "u:cf859674d49f"
                },
                {
                  "label": "image",
                  "type": "text",
                  "name": "image",
                  "id": "u:329628c5febb"
                },
                {
                  "label": "imageList",
                  "type": "text",
                  "name": "imageList",
                  "id": "u:a71f02c13c80"
                },
                {
                  "label": "imgsList",
                  "type": "text",
                  "name": "imgsList",
                  "id": "u:59896290c65c"
                }
              ]
            }
          ],
          "size": "none",
          "style": {
            "position": "static",
            "display": "block",
            "flex": "1 1 auto",
            "flexGrow": 1,
            "flexBasis": "0px"
          },
          "wrapperBody": false,
          "isFixedHeight": false,
          "isFixedWidth": false,
          "id": "u:26b7f3aa3b9f"
        },
        {
          "type": "container",
          "body": [
            {
              "type": "crud",
              "syncLocation": false,
              "api": {
                "method": "get",
                "url": "https://apifoxmock.com/m1/3546534-2258203-default/common/list",
                "requestAdaptor": "",
                "adaptor": "",
                "messages": {}
              },
              "bulkActions": [],
              "itemActions": [],
              "filterSettingSource": [
                "name",
                "age",
                "date",
                "id",
                "address",
                "enable",
                "image",
                "imageList",
                "imgsList"
              ],
              "columns": [
                {
                  "label": "name",
                  "type": "text",
                  "name": "name",
                  "id": "u:e65905c3c8df",
                  "placeholder": "-"
                },
                {
                  "label": "age",
                  "type": "text",
                  "name": "age",
                  "id": "u:5b24af957b6d"
                },
                {
                  "label": "date",
                  "type": "text",
                  "name": "date",
                  "id": "u:b7de5ede530a"
                },
                {
                  "label": "id",
                  "type": "text",
                  "name": "id",
                  "id": "u:649cc824eece"
                }
              ],
              "id": "u:b1ce6de41cd2",
              "perPageAvailable": [
                5,
                10,
                20,
                50,
                100
              ],
              "messages": {},
              "autoFillHeight": true
            }
          ],
          "size": "none",
          "style": {
            "position": "static",
            "display": "block",
            "flex": "1 1 auto",
            "flexGrow": 1,
            "flexBasis": "0px"
          },
          "wrapperBody": false,
          "isFixedHeight": false,
          "isFixedWidth": false,
          "id": "u:da9564019295"
        }
      ],
      "style": {
        "position": "relative",
        "rowGap": "10px",
        "columnGap": "10px",
        "flexWrap": "nowrap",
        "inset": "auto"
      },
      "id": "u:d2652672da16",
      "isFixedHeight": false,
      "isFixedWidth": false
    }
    ],
    "id": "u:2226de538e50",
    "pullRefresh": {
    "disabled": true
    }
    }
  4. 操作步骤 请简单描述一下复现的操作步骤...

github-actions[bot] commented 1 month ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

cybexr commented 3 weeks ago

mark

xiukun commented 3 weeks ago

e8879f044d79e895436d7d102 在flex 2列布局里 每列一个crud表格 第一个crud 的计算逻辑里会把cxd-container 元素的高度计算进行导致计算出现偏差,因为cxd-container 的 position是 static 或者是relative,这里如果要过滤cxd-container 要怎么判断合适