iview 表格样式修改
表头样式
.ivu-table th{
background-color: #F6FAFF !important;
}
斑马纹样式
<template>
<Table :columns="columns1" :data="data1" :row-class-name="rowClassName"></Table>
<template>
export default {
methods: {
// 表格斑马纹
rowClassName :function (row, index) {
if(index%2==0){
// 偶数行
return 'ivu-table-stripe-even';
}
// 奇数行
else return 'ivu-table-stripe-odd';
},
}
}
<style lang="less" scoped>
/*偶数行*/
.ivu-table-stripe-even {
td{
cursor: pointer;
background-color: #ffffff!important;
}
&:hover{
td{
background-color: #F6FAFF !important;
}
}
}
/*奇数行*/
.ivu-table-stripe-odd {
td{
cursor: pointer;
background-color: #FAFCFE!important;
}
&:hover{
td{
background-color: #F6FAFF !important;
}
}
}
</style>