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

Posted on by

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

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

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

如下：

 總寬度相等，如下：

<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: '預測參數', 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 表格多級表頭子列固定的實現的文章就介紹到這瞭,更多相關element 表格多級表頭子列固定內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：