使用 elm-ui 所有 table 列的行高相同

Question

在 elm-ui 中使用 table 或 indexedTable 时，我不知道如何为每一列获得相同的行高。这是可能的（不设置固定高度）还是我应该使用 row 和 column 来实现自己的 table？

下面的 ellie 说明了这个问题。这是用于 build table

的代码

bgcolor idx =
    (if modBy 2 idx == 0 then
        gray

     else
        white
    )
        |> Background.color

view model =
    indexedTable []
        { data =
            [ { f1 = "f11", f2 = "f12" }
            , { f1 = "f21", f2 = "f22" }
            , { f1 = "f31", f2 = "f32" }
            , { f1 = "f41", f2 = "f42" }
            ]
        , columns =
            [ { header = text "f1"
              , width = fill
              , view = \idx d -> el [ Font.size 30, bgcolor idx ] <| text d.f1
              }
            , { header = text "f2"
              , width = fill
              , view = \idx d -> el [ Font.size 15, bgcolor idx ] <| text d.f2
              }
            ]
        }
        |> layout []

提前致谢。

Answer 1

向每个单元格的属性添加 height fill 修复了您的 Ellie 示例：

        , columns =
            [ { header = text "f1"
              , width = fill
              , view =
                    \idx d ->
                        el
                            [ Font.size 30
                            , bgcolor idx
                            , height fill -- NEW!!!
                            ]
                        <|
                            text d.f1

              --
              }
            , { header = text "f2"
              , width = fill
              , view =
                    \idx d ->
                        el
                            [ Font.size 15
                            , bgcolor idx
                            , height fill -- NEW!!!
                            ]
                        <|
                            text d.f2
              }
            ]

Fixed Ellie here.

使用 elm-ui 所有 table 列的行高相同

Same row height for all table columns using elm-ui

elm

elm-ui