项目需求

如标题所说，table的行颜色一样不明显，需要行间隔颜色明显，逻辑是通过奇偶行数来单独设置颜色 。

<a-table>要单独设置颜色实现需要css穿透方式实现，而且要指定特定class名字否则会影响所有table

效果： 

重点代码:穿透更新css

• 单独设置css名字：.emptablerow , 后面跟着的是ant-design-vue配置2n（代表所有偶数行）行css:设置颜色#a2fca2

.emptablerow ::v-deep .ant-table-tbody tr:nth-child(2n)
{
  background-color:#a2fca2;
}

这个是写在模版.vue文件最后 <style>里面

• 然后是在<a-table>外层控件里的class写

实现源码：

AtableTest.vue 模版代码 

<template>
    <div class="tabletest  headg " >
    <div class="title">这是一个{{ msg }}页面</div>
    <br/>
    <a-table
        :columns="columns"
        :data-source="data"

    >
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle"><a-icon type="smile-o"/> Name</span>
      <span slot="tags" slot-scope="tags">
        <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="
            tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'
          "
        >
          {{ tag.toUpperCase() }}
        </a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="getData(record)">Invite 一 {{ record.name }}</a>
        <a-divider type="vertical"/>
        <a>Delete</a>
        <a-divider type="vertical"/>
        <a class="ant-dropdown-link"> More actions <a-icon type="down"/> </a>
      </span>
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'name'},
    width: 180,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    width: 250,
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    scopedSlots: {customRender: 'tags'},
    align: 'right',
    width: 250,
  },
  {
    title: 'Action',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '4',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

export default {
  name: "AtableTest",
  data() {
    return {
      data,
      columns,
      msg: "data-home",
    };
  },
  methods: {
    getData: function (record) {
      console.log(record)
    }
    ,
  }
};
</script>
<style lang="less" scoped>
.tabletest {
  //background-color: #5666;

  .title {
    font-size: 40px;
    letter-spacing: 2px;
  }
}

.emptablerow ::v-deep .ant-table-tbody tr:nth-child(2n)
{
  background-color:#a2fca2;
}
</style>

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <AtableTest
      />
      <br/>
      //
      <br/>
    </div>
  </div>
</template>

<script>

import AtableTest from './components/AtableTest'

export default {
  name: 'App',
  components: {AtableTest},
  data() {
    return {
      d1: moment().subtract(1, 'month'),
    }
  }
}


</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

import Vue from 'vue'
import App from './App'
import * as echarts from 'echarts'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import moment from 'moment'
//引用router.js
import router from './router.js'
//引入树图表
import Vue2OrgTree from 'vue2-org-tree'
import 'vue2-org-tree/dist/style.css'
import './styles/style.less'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd)
Vue.use(Vue2OrgTree)

//使用ElementUI
Vue.use(ElementUI);
Vue.use(moment);
Vue.use(Vue2OrgTree)

Vue.config.productionTip = false

Vue.prototype.$echarts = echarts
/* eslint-disable no-new */

new Vue({
  el: '#app',
//一定要注入到vue的实例对象上
  router,
  components: { App },
  template: '<App/>'
})