iView 组件多行表头的实现

业务需求要实现一个表格里有两行表头，经过查找 iView 组件中已经提供了处理的方法：iView 多行表头，将自己的操作过程记录一下

原表格如下图所示，民族需要包括汉族和少数民族两个子表头，性别需要包括男和女两个子表头，可以添加 children 进行实现

<template>
	<Table border :columns="columnsBig" class="InspectionTable">Table>
template>

<script>
	export default {
		data() {
			return {
				columnsBig:[
			        {
			          title: '年级',
			          key: 'grade'
			        },
			        {
			          title: '班级',
			          key: 'class'
			        },
			        {
			          title: '民族',
			          key: 'nation',
			          children:[
			            {
			              title:'汉族',
			              key:'hanzu'
			            },
			            {
			              title:'少数民族',
			              key:'ssmz'
			            },
			          ]
			        },
			        {
			          title: '性别',
			          key: 'gender',
			          children:[
			            {
			              title:'男',
			              key:'boy'
			            },
			            {
			              title:'女',
			              key:'girl'
			            },
			          ]
			        },
			        {
			          title: '年龄',
			          key: 'age'
			        },
      			]
			}
		}
	}
</script>

表头有些丑，需要添加样式进行修改

{
          title: '民族',
          key: 'nation',
          align:'center',
          // width:100,
          children:[
            {
              title:'汉族',
              key:'hanzu',
              align:'center',
              width:100,
            },
            {
              title:'少数民族',
              key:'ssmz',
              align:'center',
              width:100,
            },
          ]
        },
        {
          title: '性别',
          key: 'nation',
          align:'center',
          children:[
            {
              title:'男',
              key:'boy',
              align:'center',
              width:100,
            },
            {
              title:'女',
              key:'girl',
              align:'center',
              width:100,
            },
          ]
        },

最终效果如下图所示：