element?表格多級表頭子列固定的實現(xiàn)

更新時間：2022年06月30日 11:33:46 作者：I'm李剛

本文主要介紹了element?表格多級表頭子列固定的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧

element 中 table 固定列使用fixed 屬性；但是多級表頭時只能固定第一列；

設(shè)置對應(yīng)子列表頭的寬度和父系表頭的寬度可以使對應(yīng)的列固定；

不需要固定的列則不需要設(shè)置寬度，同時父級表頭的寬度需要和子級表頭固定列的總寬度相等，不然會出現(xiàn)內(nèi)容顯示不全或者把后面的列遮擋的問題。

如下：

總寬度相等，如下：

<el-table :data="tableData" class="tableStyle tableRadius" stripe
                        :header-row-class-name="headerRow"
                        v-loading="tabsPage[version].loading"
                        :cell-style="cellStyle"
                        border>
                            <el-table-column :label="item.label" v-for="(item,i) of tableHeader" :width="item.width" :key="i" :fixed="item.fixed">
                                <el-table-column
                                    show-overflow-tooltip
                                    v-for="(ite,j) in item.child"
                                    :width="ite.width"
                                    :fixed="ite.fixed"
                                    :key="j"
                                    :prop="ite.prop"
                                    :label="ite.label"
                                    :formatter="ite.formatter">
                                </el-table-column>
                            </el-table-column>
                        </el-table>

{
                    label: '預(yù)測參數(shù)', prop: '',
                    fixed:true,
                    width: '660',
                    child: [
                        {label: '公司代碼', prop: '', fixed: 'left',width: '80',},
                        {label: '資產(chǎn)號', prop: '', fixed: 'left',width: '110'},
                        {label: '年度', prop: '', fixed: 'left',width: '70'},
                        {label: '資產(chǎn)類別', prop: '', fixed: 'left',width: '120'},
                        {label: '電壓等級', prop: '', fixed: 'left',width: '80'},
                        {label: '資本化日期', prop: '', fixed: 'left',width: '100'},
                        {label: '利潤中心', prop: '', fixed: 'left',width: '100'},
                        {label: '預(yù)測屬性01', prop: ''},
                        {label: '預(yù)測屬性02', prop: ''},
                        {label: '預(yù)測屬性03', prop: ''},
                    ]
                },

最終效果如下：