最近項目中做表格比較多，對element表格的使用，只需要傳遞進(jìn)去數(shù)據(jù)，然后寫死表頭即可渲染。
但現(xiàn)實中應(yīng)用中，如果寫死表頭，并且每個組件中寫自己的表格，不僅浪費時間而且消耗性能。這個時候需要動態(tài)渲染表頭。
而官方例子都是寫死表頭，那么為了滿足項目需求，只能自己來研究一下。
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ù)是一個對象，里面包含當(dāng)前行row、當(dāng)前列column、當(dāng)前行號rowIndex、當(dāng)前列號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 style="width: 100%; margin-top: 25px" ></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ù)，設(shè)為０則直接不顯示 }; } else { return { rowspan: 0, colspan: 0 }; } } }這里面可以通過對rowIndex，columnIndex根據(jù)自己的要求作一些條件判斷，然后返回rowspan，colspan就可以合并了。
總結(jié)
以上所述是小編給大家介紹的vue elementUI table 自定義表頭和行合并的實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
新聞熱點
疑難解答
