选项卡切换组件，常用于平级区域大块内容的的收纳和展现。比如我们现在有这样一个页面：
这个页面是没有设置自定义样式之前的页面
我们可以根据自己的分割设计表头，表体样式：
- 背景颜色为深色背景
- 左侧可勾选checkbox
- 选中鼠标hover浮动到某行，当前行背景颜色更换为红色
- 奇数偶数行变色
比如上图这样的样式。
/*底色*/
.ivu-table td{
background-color: #182328;
color: #fff;
}/*头部th*/
.ivu-table-header th{
color:#FFD3B4;
font-weight: bold;
background-color: #212c31;
border: none;
}/*偶数行*/
.ivu-table-stripe-even td{
background-color: #434343!important;
}
/*奇数行*/
.ivu-table-stripe-odd td{
background-color: #282828!important;
}接下来定义rowClassName方法
rowClassName :function (row, index) {
if(index%2==0){
return 'ivu-table-stripe-even';
}
else return 'ivu-table-stripe-odd';
} /*浮在某行*/
.ivu-table-row-hover td {
background-color: #d63333!important;
}/*选中某一行高亮*/
.ivu-table-row-highlight td {
background-color: #d63333!important;
}最终代码如下：
<template>
<div>
<Table ref="selection" @on-selection-change="onSelect" height="700" no-data-text="暂无数据" :row-class-name="rowClassName" :columns="columns4" :data="data1" highlight-row></Table>
<Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
</div>
</template>
<script>
export default {
data () {
return {
selecteds: [],
columns4: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: 'ID',
key: 'id'
},
{
title: '姓名',
key: 'name'
},
{
title: '性别',
key: 'sex'
},
{
title: '年龄',
key: 'age'
},
{
title: '联系方式',
key: 'tel'
},
{
title: '学历',
key: 'education'
},
{
title: 'AQE证书',
key: 'is_aqe'
},
{
title: '住址',
key: 'address'
},
{
title: 'QQ',
key: 'contact'
},
{
title: '电子邮箱',
key: 'email'
},
{
title: '其他',
key: 'other'
}
],
data1: [
{
id: 'Nicolas Cage',
name: 'Nicolas Cage',
sex: 'man',
age: 'New York No. 1 Lake Park',
tel: '13674188888',
education: 'New York No. 1 Lake Park',
is_aqe: '2016-10-03',
address: 'New York No. 1 Lake Park',
contact: '2016-10-03',
email: 'New York No. 1 Lake Park',
other: '2050-10-03'
},{
id: 'Nicolas Cage',
name: 'Nicolas Cage',
sex: 'man',
age: 'New York No. 1 Lake Park',
tel: '13674188888',
education: 'New York No. 1 Lake Park',
is_aqe: '2016-10-03',
address: 'New York No. 1 Lake Park',
contact: '2016-10-03',
email: 'New York No. 1 Lake Park',
other: '2050-10-03'
},{
id: 'Nicolas Cage',
name: 'Nicolas Cage',
sex: 'man',
age: 'New York No. 1 Lake Park',
tel: '13674188888',
education: 'New York No. 1 Lake Park',
is_aqe: '2016-10-03',
address: 'New York No. 1 Lake Park',
contact: '2016-10-03',
email: 'New York No. 1 Lake Park',
other: '2050-10-03'
},{
id: 'Nicolas Cage',
name: 'Nicolas Cage',
sex: 'man',
age: 'New York No. 1 Lake Park',
tel: '13674188888',
education: 'New York No. 1 Lake Park',
is_aqe: '2016-10-03',
address: 'New York No. 1 Lake Park',
contact: '2016-10-03',
email: 'New York No. 1 Lake Park',
other: '2050-10-03',
_checked: true
},{
id: 'Nicolas Cage',
name: 'Nicolas Cage',
sex: 'man',
age: 'New York No. 1 Lake Park',
tel: '13674188888',
education: 'New York No. 1 Lake Park',
is_aqe: '2016-10-03',
address: 'New York No. 1 Lake Park',
contact: '2016-10-03',
email: 'New York No. 1 Lake Park',
other: '2050-10-03'
},{
id: 'Nicolas Cage',
name: 'Nicolas Cage',
sex: 'man',
age: 'New York No. 1 Lake Park',
tel: '13674188888',
education: 'New York No. 1 Lake Park',
is_aqe: '2016-10-03',
address: 'New York No. 1 Lake Park',
contact: '2016-10-03',
email: 'New York No. 1 Lake Park',
other: '2050-10-03'
},{
id: 'Nicolas Cage',
name: 'Nicolas Cage',
sex: 'man',
age: 'New York No. 1 Lake Park',
tel: '13674188888',
education: 'New York No. 1 Lake Park',
is_aqe: '2016-10-03',
address: 'New York No. 1 Lake Park',
contact: '2016-10-03',
email: 'New York No. 1 Lake Park',
other: '2050-10-03'
}
]
}
},
methods: {
handleSelectAll (status) {
this.$refs.selection.selectAll(status);
},
rowClassName :function (row, index) {
if(index%2==0){
return 'ivu-table-stripe-even';
}
else return 'ivu-table-stripe-odd';
},
onSelect(selection,index){
this.selecteds = selection;
}
/*,
onDoubleClick(row,index){
//改变为勾选样式
//将当前行加入到selection
this.$refs.selection.data[index]._checked=!this.$refs.selection.data[index]._checked
}*/
}
}
</script>
<style>
/*外层table的border*/
.ivu-table-wrapper {
border:none
}
/*底色*/
.ivu-table td{
background-color: #182328;
color: #fff;
}
/*每行的基本样式*/
.ivu-table-row td {
color: #fff;
border:none
}
/*头部th*/
.ivu-table-header thead tr th {
position: relative;
height: 100%;
padding: 8px;
background-color: coral;
}
/*头部th*/
.ivu-table-header th{
color:##f9504a;
font-weight: bold;
background-color: #1890ff;
border: none;
}
/*偶数行*/
.ivu-table-stripe-even td{
background-color: #434343!important;
}
/*奇数行*/
.ivu-table-stripe-odd td{
background-color: #282828!important;
}
/*选中某一行高亮*/
.ivu-table-row-highlight td {
background-color: #d63333!important;
}
/*浮在某行*/
.ivu-table-row-hover td {
background-color: #d63333!important;
}
</style>