鍍金池/ 問答/HTML/ 由rowspan導致的table錯位問題

由rowspan導致的table錯位問題

整個table是在vue中通過v-for生成的，目前出現(xiàn)的問題是當某一個tr中所有的td元素的rowspan屬性均大于1時，會發(fā)生錯位情況（返回數(shù)據(jù)中包含rowspan等值），返回數(shù)據(jù)應該是有不規(guī)范的地方，但是目前無法保證這種情況不再發(fā)生，所以希望在前端做一步這個的兼容。想請教一下如何實現(xiàn)。

補充：當tr的全部td均大于1時，tr會喪失高度。

錯位情況html結構
錯位情況效果

正常情況html結構

正常情況效果

回答
編輯回答
蝶戀花

因為rowspan是用來占行的，如果一行里全部td的 rows 都為2
則意味著 下一tr 里應該是沒有 td 元素的
但是實際上 下一tr 又有td，所以這行的td沒有容身之處，被擠到右邊去了
所以你要做的，要么是讓后端跟你正確的數(shù)據(jù)，要么是處理這種情況
把出問題的行所有的td 的rowspan都設為1

加個filters吧
假設 row 為 td 的數(shù)組

<td :rowspan="td.rowspan | handleRowspan(row)"></td>

filters: {
  handleRowspan: function (currentRowSpan,row) {
    return row.filter(td=>{td.rowspan === currentRowSpan}).length === row.length?1:currentRowSpan
  }
}
2018年3月7日 10:53