vxe-table 使用分組表頭列頭

 

---

1.x ~ 2.x 版本使用 <vxe-column…> | <vxe-table-column…> 標簽遞歸方式

<vxe-table :data="tableData" show-overflow>
  <vxe-column title="基本信息">
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="Name"></vxe-column>
  </vxe-column>
  <vxe-column title="更多信息">
    <vxe-column field="role" title="Role"></vxe-column>
    <vxe-column title="詳細信息">
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
    </vxe-column>
  </vxe-column>
  <vxe-column title="分類信息">
    <vxe-column field="date3" title="Date"></vxe-column>
  </vxe-column>
  <vxe-column field="address" title="Address"></vxe-column>
</vxe-table>

---

 

2.9.24 ~ 3.x 同時支持兩種方式，為 4.x 過度

  3.x ~ 4.x 版本使用 <vxe-colgroup…> | <vxe-table-colgroup…> 分組標簽

<vxe-table :data="tableData" show-overflow>
  <vxe-colgroup title="基本信息">
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="Name"></vxe-column>
  </vxe-colgroup>
  <vxe-colgroup title="更多信息">
    <vxe-column field="role" title="Role"></vxe-column>
    <vxe-colgroup title="詳細信息">
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
    </vxe-colgroup>
  </vxe-colgroup>
  <vxe-colgroup title="分類信息">
    <vxe-column field="date3" title="Date"></vxe-column>
  </vxe-colgroup>
  <vxe-column field="address" title="Address"></vxe-column>
</vxe-table>

 

---

如果是 vxe-grid 高級表格，則使用 children

<vxe-grid :columns="tableColumn" :data="tableData" show-overflow></vxe-grid>

export default {
  data () {
    return {
      tableColumn: [
        { type: 'seq', width: 50 },
        {
          title: '基本信息',
          children: [
            { field: 'name', title: 'Name' },
            {
              title: '其他信息',
              children: [
                { field: 'nickname', title: 'Nickname' },
                { field: 'age', title: 'Age' }
              ]
            },
            { field: 'sex', title: 'Sex' }
          ]
        },
        { field: 'address', title: 'Address', showOverflow: true }
      ],
      tableData: []
    }
  }
}