iview自定義實現多級表頭

最近更新： 2018-07-19

• 注意：最新版iview已經提供多級表頭功能 參考

• 原理：利用多個Table組件通過顯示和隱藏thead和tbody來拼接表格（較粗暴）

---

html

<div style="margin: 50px">
    <Table class="ud-table-no-body" :columns="columns0" :data="dataNull" border></Table>
    <Table class="ud-table-no-body ud-no-t-b ud-no-b-b" :columns="columns1" :data="dataNull" border></Table>
    <Table class="ud-table-no-body ud-no-b-b" :columns="columns2" :data="dataNull" border></Table>
    <Table class="ud-table-no-header" :columns="columns" :data="data" border></Table>
</div>

---

javascript

• 非合並而來的列，請注意設置寬度（如下的寬度160）否則會被均分導致下面的行的列寬度不一致
• 這里是表格列數不固定的示例

data() {
    return {
        columns0: [],
        columns1: [],
        columns2: [],
        columns: [],
        dataNull: [],
        data: [
            {
                name: 'Hewitt',
                values: [10, 11, 12, 13, 14, 15]
            }
        ],

        dates: []
    };
},

created() {
    const dates = [2016, 2017];
    const WIDTH = 160;

    this.columns0 = [{ title: '模塊名稱', width: WIDTH, align: 'center' }, { title: 'PV/UV', align: 'center' }];
    this.columns1 = [
        { renderHeader: () => (''), width: WIDTH },
        { title: '總計' },
        ...dates.map(v => ({ title: v }))
    ];

    const tempC2 = [{ renderHeader: () => (''), width: WIDTH }, { title: 'PV' }, { title: 'UV' }];
    dates.forEach(() => {
        tempC2.push({ title: 'PV' });
        tempC2.push({ title: 'UV' });
    });
    this.columns2 = tempC2;

    const tempC3 = [{ title: 'Name', key: 'name', width: WIDTH, align: 'center' }];
    for (let i = 0, l = (dates.length * 2) + 2; i < l; i++) {
        tempC3.push({ title: '', render: (h, p) => p.row.values[i] });
    }
    this.columns = tempC3;
}

---

css

• 這里主要隱藏tbody和thead，以及刪除header的一些border樣式

    .ud-table-no-body tbody{
        display: none;
    }
    .ud-no-t-b.ivu-table-wrapper{
        border-top: 0 ;
    }
    .ud-no-b-b .ivu-table:before{
        background-color: #fff;
    }
    .ud-table-no-header thead{
        display: none ;
    }