el table 合併單元格

2021-09-25 08:08:35 字數 1667 閱讀 7966

在做需求的時候,我們總是能遇到各種各樣奇葩的需求… o(╯□╰)o

但是呢,依然擋不住一顆探索的心吶!先上展示效果

需求是這樣的:

在前端上傳檔案後由後端解析成資料再傳回前端做展示,但是傳到前端的資料呢,是一行一行的,但是有些單元格卻是需要合併,因此,後端會返回兩個陣列,乙個陣列是資料,另乙個資料是需要合併的單元格格式,如圖

cellsdatatable 是後端返回的資料行

mergecell 是需要合併的單元格資訊由於是使用者自己上傳的檔案,行和列都不確定,前端需要動態地展示列標題。

廢話不多說了,上**:

border

ref=

"filetable"

:data

="fileuploaddata"

class

="table-reset"

size

="small"

:span-method

="objectspanmethod"

>

align

='center'

width

="40"

fixed

="left"

type

="selection"

>

el-table-column

>

v-for

="(title, index) in filetitle"

:key

="index"

:prop

="title.name"

:label

="title.name"

align

='center'

>

el-table-column

>

width

="70"

fixed

="right"

label

='選為標題'

>

slot-scope

="scope"

>

class

="cbtn cbtn-yellow"

@click

="ontitle($event, scope.row)"

>

span

>

template

>

el-table-column

>

el-table

>

由於我在前端加了分頁,所以每行的資料需要處理一下

objectspanmethod()

)if(crow && crow.length !==0)

}else}}}},

el table合併單元格

合併單元格對需要合併的 繫結 span method objectspanmethod 在獲取資料後處理資料 與table繫結的陣列 this.mergetablerow table繫結的陣列,要合併的值即某列單元格 categoryid 要合併的值即某列單元格 name 合併單元格 處理函式 me...

el table 合併單元格(絕對好用)

一 有個需求是合併單元格,但是表頭,行資料都是寫活的。前端資料是這樣 tabledata是行資料,tablecolumn是表頭資料,tablecolumn 二 然後介紹如何合併單元格 整理拿到的資料 setdates arr for var i 0,len arr.length i len i 儲存...

合併單元格

青年 老大,最近在 中合併單元格,總是不明就裡,好像是合併對了,有時也是蒙的,您能不能就此指條明路?禪師 這個問題很簡單,合併單元格分為跨行合併和跨列合併,這是標籤的rowspan和colspan屬性問題,已知3x3 禪師 首先說說跨行合併rowspan,由於我們書寫 的習慣是標籤包裹便簽,因此書寫...