在试剂中使用 colspan 呈现表元素

Question

我在试剂中有一个表，并设置了表头的列跨度= 2。

(defn my-table []
[:table.table.table-striped.table-bordered
[:thead
[:tr
[:th "Col1"]
[:th "Col2"]
(doall (for [id @ids]
^{:key id}
[:th {:data-id (id :id)
:col-span "2"}
(str (get id :name))]))]]
[:tbody
(doall (for [i (range (count @table-items))]
(let [table-item (cursor table-items [i])]
^{:key i}
[item-row table-item])))]])

但是在每一行中，请参阅下面的item-row，我正在循环访问数据结构以获取该行中拆分列的数据，并且遇到了问题。 如果这样做，我可以让数据正确渲染

[:div [:td [:span (:id id)]]
[:td [:span (:name id)]]]

我知道这是不正确/无效的 html。

(defn item-row [item]
(fn []
[:tr
[:td [:span (:key1 @item)]]
[:td [:span (:key2 @item)]]
(doall (for [id @ids]
^{:key id}
[[:td [:span (:x id)]]
[:td [:span (:y id)]]]))]))

有没有人知道如何在 for 循环中呈现两个:td元素？ 我的想法是将两个:td元素包装在一个载体中，并让试剂处理渲染拆分的列。

(doall (for [id @ids]
^{:key id}
[[:td [:span (:x id)]]
[:td [:span (:y id)]]])

我还收到以下错误：core.cljs:4793 Uncaught Error: No item [:td "."] in vector of length 2 at Object.cljs$core$vector_index_out_of_bounds [as vector_index_out_of_bounds]

这与[:td [:span (:y id)]]相关

Answer 1

您可以利用您只是返回数据的事实，因此一种方法是使用前两列构建:tr向量的初始内容，然后在使用into中添加其余的:td元素。 这里有一个例子，我认为可以解决你的问题：

cljs.user=> (def ids [{:x 1 :y 2} {:x 3 :y 4}])
#'cljs.user/ids
cljs.user=> (let [tr [:tr 
#_=>           [:td "first col"]
#_=>           [:td "second col"]]]
#_=>   (reduce (fn [acc id]
#_=>             (into acc
#_=>                   [[:td [:span (:x id)]]
#_=>                    [:td [:span (:y id)]]]))
#_=>           tr
#_=>           ids))
[:tr [:td "first col"] [:td "second col"] [:td [:span 1]] [:td [:span 2]] [:td [:span 3]] [:td [:span 4]]]
cljs.user=>