table组件的width有时会失效

thinkingc commented 1 week ago

描述问题：

table组件的width有时会失效

截图或视频：

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

你是如何使用 amis 的？ npm
amis 版本是什么？请先在最新 beta 版本测试问题是否存在存在

粘贴有问题的完整 amis schema 代码：

{
"type": "page",
"data": {
"table": [
  {
    "id": 1,
    "version": "3",
    "parseSceneRuleList": [
      "第一列",
      "第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列"
    ]
  },
  {
    "id": 2,
    "version": "3",
    "parseSceneRuleList": [
      "第一列",
      "第二列"
    ]
  }
]
},
"body": [
{
  "type": "table",
  "source": "${table}",
  "syncLocation": false,
  "columns": [
    {
      "name": "id",
      "label": "ID"
    },
    {
      "name": "version",
      "label": "version版本"
    },
    {
      "label": "匹配规则",
      "width": 300,
      "name": "parseSceneRuleList",
      "type": "each",
      "items": {
        "type": "tooltip-wrapper",
        "className": "mb-1",
        "placement": "right",
        "content": "${item}",
        "body": {
          "type": "tag",
          "displayMode": "bordered",
          "className": "max-w-full w-full justify-start",
          "label": "${item}"
        }
      }
    }
  ]
}
]
}

操作步骤观察width：300那一列，width失效了

lhtuling commented 1 week ago

学过html+css基础的话应该经常碰到这种情况 table 设置的宽度和高度可能会被内部内容、样式所影响所以需要处理内部内容的样式，个人认为这个属于正常情况的！

Amis低代码前端框架交流群【QQ1群】：717791727 Amis低代码前端框架交流群【QQ2群】：721182449

donglixiaoche commented 1 week ago

@thinkingc 不确定你说的失效的场景，但是在 table 中，td 的宽度是会根据实际的宽度调整的。举个例子： table 中有 3 列 td, 如果你为每一列 td 设置 50px 的宽度，但是 table 的宽度是 300px，那么实际渲染出来的时候每一列的 td 实际会增加到 100px，而非预先设置的 50px。

具体的规则你可以去看一下 table 的布局规则

thinkingc commented 1 week ago

@thinkingc 不确定你说的失效的场景，但是在 table 中，td 的宽度是会根据实际的宽度调整的。举个例子： table 中有 3 列 td, 如果你为每一列 td 设置 50px 的宽度，但是 table 的宽度是 300px，那么实际渲染出来的时候每一列的 td 实际会增加到 100px，而非预先设置的 50px。

具体的规则你可以去看一下 table 的布局规则

我理解你说的，如果每列都设置width，width总和不等于table宽度时会失效，但我现在只是设置了一列的width，如果把max-w-full w-full这两个classname去掉就能生效了，但我需要让tag宽度占td的100%。

donglixiaoche commented 3 days ago

@thinkingc 我又尝试看了下，默认的 table-layout: auto; 会根据内容的宽度来调整列的宽度。按理说设置 table-layout: fixed; 应该能解决，但是我看了下，列的宽度还是会有一点调整，具体还需要再看看

baidu / amis