baidu / amis

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

table2组件,无法指定image组件的宽度,恒为110px #10980

Open Beemo37 opened 1 month ago

Beemo37 commented 1 month ago

描述问题:

table2组件的columns中,想要展示图片,所以使用了image组件,根据手册说明,可以设置width以及height来指定图片的宽和高,试下来指定width是无效的,宽度恒为110px,但指定height有效。

另在tablecrud组件下进行了试验,width是有效的,仅仅在table2下无效。

截图或视频:


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

  1. 你是如何使用 amis 的? sdknpm其他...

sdk

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

6.8.0

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

    {
    "type": "page",
    "body": {
    "type": "service",
    "data": {
      "rows": [
        {
          "image": "https://suda.cdn.bcebos.com/amis/images/alice-macaw.jpg"
        },
        {
          "image": "https://suda.cdn.bcebos.com/amis/images/alice-macaw.jpg"
        }
      ]
    },
    "body": [
      {
        "type": "table2",
        "source": "${rows}",
        "rowSelection": {
          "type": "checkbox",
          "keyField": "id"
        },
        "columns": [
          {
            "title": "Image",
            "type": "image",
            "name": "image",
            "width": "50px",
            "height": "50px"
          }
        ]
      }
    ]
    }
    }
  2. 操作步骤

可以在官网的实时渲染中粘贴以上代码查看效果

lhtuling commented 1 month ago

image

没毛病啊~没更新到最新版本的吧?

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

Beemo37 commented 1 month ago

image

没毛病啊~没更新到最新版本的吧?

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


使用的是最新的6.8.0版本。 在本地上不生效,然后我上边截图上是在Amis官网实时渲染的,也是不生效。

你的例子中这个图片,可以看出来高度是10,宽度还是110。可以用F12看一下,他上边描述的是10 110,style也只有height。换成table组件,他会写着10 10,style里有height也有width。

可以在image组件中添加"thumbMode": "cover",就可以看出效果了