iview 表格样式修改

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>