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

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

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

不需要固定的列則不需要設(shè)置寬度，同時(shí)父級(jí)表頭的寬度需要和子級(jí)表頭固定列的總寬度相等，不然會(huì)出現(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ù)測(cè)參數(shù)', prop: '',
                    fixed:true,
                    width: '660',
                    child: [
                        {label: '公司代碼', prop: '', fixed: 'left',width: '80',},
                        {label: '資產(chǎn)號(hào)', prop: '', fixed: 'left',width: '110'},
                        {label: '年度', prop: '', fixed: 'left',width: '70'},
                        {label: '資產(chǎn)類別', prop: '', fixed: 'left',width: '120'},
                        {label: '電壓等級(jí)', prop: '', fixed: 'left',width: '80'},
                        {label: '資本化日期', prop: '', fixed: 'left',width: '100'},
                        {label: '利潤(rùn)中心', prop: '', fixed: 'left',width: '100'},
                        {label: '預(yù)測(cè)屬性01', prop: ''},
                        {label: '預(yù)測(cè)屬性02', prop: ''},
                        {label: '預(yù)測(cè)屬性03', prop: ''},
                    ]
                },

最終效果如下：

到此這篇關(guān)于element 表格多級(jí)表頭子列固定的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)element 表格多級(jí)表頭子列固定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: