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>
出来的效果: