這篇文章主要介紹vue中elementUI table如何實現(xiàn)自定義表頭和行合并,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
10年積累的做網(wǎng)站、成都網(wǎng)站制作經(jīng)驗,可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你,你也不認識我。但先做網(wǎng)站后付款的網(wǎng)站建設流程,更有桂陽免費網(wǎng)站建設讓你可以放心的選擇與我們合作。
1、自定義表頭
代碼如下,其實就是分了兩部分,表格主數(shù)據(jù)是在TableData對象中,表頭的數(shù)據(jù)保存在headerDatas,headerDatas.label其實就是表頭的值,如果表頭是“序號”,那么headerDatas.label="序號",在TableData中構(gòu)建TableData[序號]= 1 這樣的map對象,就可以動態(tài)渲染出想要的表格
<el-table :data="TableData" :height="tableHeight" :row-class-name="showEmergencyLine" border element-loading-spinner="el-icon-loading" element-loading-text="拼命加載中" @selection-change="handleSelectionChange" v-loading.lock="TableLoading" @header-dragend="changeHeaderWidth" > <el-table-column v-for="header in headerDatas" :prop="header.type" :key="header.label" :label="header.label" :width="header.width" :minWidth="header.minWidth" :itemname="header.mid" :align="header.align" header-align="center" > <template slot-scope="scope"> <div v-else >{{scope.row[scope.column.property]}}</div> </template> </el-table-column> </el-table>
2、行合并
在項目中,有些表格常常會有像下面這樣的需求,一行合并后面幾行,那么這個怎么處理呢
官方文檔中有這個方法
通過給table傳入span-method方法可以實現(xiàn)合并行或列,方法的參數(shù)是一個對象,里面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數(shù)可以返回一個包含兩個元素的數(shù)組,第一個元素代表rowspan,第二個元素代表colspan。 也可以返回一個鍵名為rowspan和colspan的對象。
<el-table :data="tableData" :span-method="objectSpanMethod" highlight-current-row element-loading-spinner="el-icon-loading" element-loading-text="拼命加載中" v-loading.lock="mainTableLoading" border > </el-table> arraySpanMethod({ row, column, rowIndex, columnIndex }) { if (rowIndex % 2 === 0) {//偶數(shù)行 if (columnIndex === 0) {//第一列 return [1, 2];//1合并一行,2占兩行 } else if (columnIndex === 1) {//第二列 return [0, 0];//0合并0行,0占0行 } } }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex % 2 === 0) { return { rowspan: 2,//合并的行數(shù) colspan: 1//合并的列數(shù),設為0則直接不顯示 }; } else { return { rowspan: 0, colspan: 0 }; } } }
這里面可以通過對rowIndex,columnIndex根據(jù)自己的要求作一些條件判斷,然后返回rowspan,colspan就可以合并了。
以上是“vue中elementUI table如何實現(xiàn)自定義表頭和行合并”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
名稱欄目:vue中elementUItable如何實現(xiàn)自定義表頭和行合并
文章來源:http://muchs.cn/article32/jpedsc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供關鍵詞優(yōu)化、網(wǎng)站導航、外貿(mào)建站、動態(tài)網(wǎng)站、做網(wǎng)站、服務器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)