element表格多級表頭子列固定怎么實現

這篇“element表格多級表頭子列固定怎么實現”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“element表格多級表頭子列固定怎么實現”文章吧。

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

設置對應子列表頭的寬度和父系表頭的寬度可以使對應的列固定；

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

如下：

 總寬度相等，如下：

<el-table :data="tableData" class="tableStyle tableRadius" stripe
                        :header-row-class-name="headerRow"
                        v-loading="tabsPage[version].loading"
                        :cell-
                        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: '預測參數', prop: '',
                    fixed:true,
                    width: '660',
                    child: [
                        {label: '公司代碼', prop: '', fixed: 'left',width: '80',},
                        {label: '資產號', prop: '', fixed: 'left',width: '110'},
                        {label: '年度', prop: '', fixed: 'left',width: '70'},
                        {label: '資產類別', prop: '', fixed: 'left',width: '120'},
                        {label: '電壓等級', prop: '', fixed: 'left',width: '80'},
                        {label: '資本化日期', prop: '', fixed: 'left',width: '100'},
                        {label: '利潤中心', prop: '', fixed: 'left',width: '100'},
                        {label: '預測屬性01', prop: ''},
                        {label: '預測屬性02', prop: ''},
                        {label: '預測屬性03', prop: ''},
                    ]
                },

最終效果如下：

以上就是關于“element表格多級表頭子列固定怎么實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。