Antd 表格內經過rowClassName實現隔行變色的顯示方法

ant design中 table組件很方便，在項目中遇到了須要實現奇偶行顏色不一樣以方便閱讀的功能，主要用到了rowClassName這一api，經過判斷index的奇偶來實現不一樣的樣式分配。 rowClassName是一個函數，它的第一個參數是record,對應的是這一行的全部數據，第二個參數是index，對應的是table組件本身計數的第幾行；

沒有合併單元格的簡單狀況

直接判斷index的奇偶做出不一樣的樣式分配；

rowClassName={(record, index) => {
                        let className = 'light-row';
                        if (index % 2 === 1) className = 'dark-row';
                        return className;
                    }}
複製代碼

合併單元格後的複雜狀況

這裏對應github上的一個沒有解決的issue；
在合併單元格後，因爲被合併的那一行在Table組件本身的計數中仍然做爲一行存在，因此按照上一種方法實現的效果會如圖所示，特別吃藕；

咱們想要的效果是在合併單元格後，第三行和第四行的顏色同樣，第五行的顏色不一樣，若是依靠 rowClassName中自帶的 index是不行的，因此這時候須要 本身設定一個fakeIndex和一個用來指示此行是否被合併的標誌（我設的是一個標誌今後行起還有多少合併行的計數count，遇到普通行，fakeIndex加1；若是遇到被合併的行，則fakeIndex不加1，count減1。這裏能夠這麼作的緣由是antd的表格在渲染的時候是每渲染一行，就執行一次 rowClassName的函數。
具體實現代碼以下：
首先在React Component的constructor裏面申明 fakeIndex和 count

constructor() {
        super();
        this.fakeIndex = 0;
        this.licensesCount = 1;
    }
複製代碼

而後在render渲染的<Table/>裏面設置rowClassName函數

rowClassName={record => {
       let className = 'light-row';
       if (record.licenses.length > 1)
            this.licensesCount = record.licenses.length; //用來初始化合並的行數
             if (this.fakeIndex % 2 === 1) {
                className = 'dark-row';
            }
            if (record.id.charAt(0) === 'c') { //判斷是不是合併行
                this.licensesCount--;
            }
            if (this.licensesCount === 1) this.fakeIndex++;
                return className;
            }}
複製代碼

這樣就解決啦！