iview组件中table表头含有子表头

代码如下：

 <Table size="small" border :row-class-name="rowClassName" :loading="isloading"  highlight-row
                           :columns="tableColumn" :data="tableData.data"></Table>

tableColumnl中可以在column中采用children{}；如果想包含多个，可以在children里添加多个属性

 tableColumn:[
                    {
                        title: '姓名',
                        key: 'name',
                        align:'center',
                    },
                    {
                        title: '年龄',
                        key: 'age',
                        align:'center',
                    },
                    {
                        title: '性别',
                        align: 'center',
                        children:[
                            {
                                title: '男',
                                key: 'boy',
                                align: 'center',
                            },
                            {
                                title: '女',
                                key: 'girl',
                                align: 'center',
                            },
                        ]
                    },
             ],

数据

 tableData:{
                    data:[
                        {
                            name: '王小明',
                            age: 18,
                            boy: '男',
                            girl: '女',
                        },
                        {
                            name: '小明',
                            age: 18,
                            boy: '男',
                            girl: '女',
                        },
                        {
                            name: '小明',
                            age: 18,
                            boy: '男',
                            girl: '女',
                        },
                        {
                            name: '王小',
                            age: 18,
                            boy: '男',
                            girl: '女',
                        },
                        {
                            name: '王小明',
                            age: 18,
                            boy: '男',
                            girl: '女',
                        },
                    ]

样式：如果想强调某一行的底色：参考官网的row-class-name：
行：通过属性 row-class-name 可以给某一行指定一个样式名称。

我自己是这样写的：

 methods:{
            rowClassName(row,index){
                if(index%2!==0){
                    return 'demo-table-info-row';
                }else return ''
            }

        }

样式：

<style  type="text/less" lang="less">
    #llllll{
        .ivu-table .demo-table-info-row td{
            background-color:rgb(243,243,245);
            color: #333;
        }
          /*  这个样式是鼠标点上去的颜色*/
        .ivu-table-row-hover td {
            background-color: rgb(230,243,252) !important;
            color: #333;
        }
    }
</style>

出来的效果：

标签：boy,name,age,表头,table,girl,iview,row
来源： https://blog.csdn.net/qq_43481904/article/details/121684701