elementUI组件库table多级表头的应用

类似于这种多级表头

在elementUi组件库里是这样应用的：

实现方法：只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

<template>
  <el-table :data="tableData3" style="width: 100%">
    <el-table-column prop="date" label="日期" width="150"></el-table-column>
    <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column label="地址">
            <el-table-column prop="province" label="省份" width="120"></el-table-column>
            <el-table-column prop="city" label="市区" width="120"></el-table-column>
            <el-table-column prop="address" label="地址" width="300"></el-table-column>
            <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
        </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    }
  }
</script>

里面有些属性看不懂的，请到elementui官网中查看（http://element-cn.eleme.io/#/zh-CN/component/table）

下面是我根据实际需求实现的。

第一：我们对表格应用很多，于是将表格写成父组件，然后子组件调用父组件

组件的编写：

      <template v-for="(item ,index) in TableOpt.columnList">         
          <!-- 多级表头 -->
          <el-table-column v-else-if="item.type === 'column' :label='item.label'  
              :key="index" :align="item.align" :width="item.width">
                <div v-for="(column, index) in item.multistage" :key="index" >
                  <el-table-column  
                  :prop=column.prop
                  :label=column.label
                  :width=column.width>
                  </el-table-column>
                </div>
          </el-table-column>
      </template>

其中TableOpt在props定义为TableOpt:Object

第二：在子组件中应用

 <reports :TableOpt="TableOpt" :TableFields="TableFields"></reports>
<script>
import Reports from '@/components/JJXSReports'
export default {
  components: {
    Reports
  },
   data() {
    return {
 TableOpt: {
        list: [],
        columnList: [],
        maxHeight: '73'
      },
      TableFields: {
        fields: {
          Mech_Name: true,
          car_prem: true,
          pay: true,
          pay_prem: true,
          payment: true,
          hire: true,
          sh_settle: true,
          real_settle: true
        },
        list: [
          { field: '机构', prop: 'Mech_Name' },
          { field: '车辆保费', prop: 'car_prem' },
          { field: '雇车费', prop: 'hire' },
          { field: '运费', prop: 'pay' },
          { field: '运单保费', prop: 'pay_prem' },
          { field: '货款', prop: 'payment' }
        ]
      },
      columnList: [
        {
          type: 'column',
          label: '车辆保费',
          className: 'typeSel',
          align: 'center',
          prop: 'car_prem',
          multistage: [
            {
              prop: 'car_prem.sh_settle',
              label: '上交'
            },
            {
              prop: 'car_prem.real_settle',
              label: '实结'
            },
            {
              prop: 'car_prem.handin',
              label: '应结'
            }
          ]
        },
        {
          type: 'column',
          label: '雇车费',
          className: 'typeSel',
          align: 'center',
          prop: 'hire',
          multistage: [
            {
              prop: 'hire.sh_settle',
              label: '上交'
            },
            {
              prop: 'hire.real_settle',
              label: '实结'
            },
            {
              prop: 'hire.handin',
              label: '应结'
            }
          ]
        }
      ],
      count: 0
    },
  created() {
    this.TableOpt.columnList = this.columnList
    this.show()
  },
  methods: {
    async show() {
      const service = 'Report_Account.account_statistics'//接口名
      const res = await udao(service, this.FormData)
      if (parseInt(res.result) === 1) {
        this.TableOpt.list = res.info//返回值
      }
    }
}
</script>

在子组件中传值，即可实现