ant design vue给table设置斑马条纹样式

效果图

<a-table :columns="columns" :data-source="data"></a-table>

css设置：

<style lang="less" scoped>/* 表格斑马样式 **//deep/.ant-table-tbody tr:nth-child(2n){background-color:#fafafa;}</style>

js设置：

参考链接：/yorcentroll/article/details/105765457

renderStripe () {const table = document.getElementsByClassName( 'ant-table-row')if (table.length > 0){const rowList = [ ...table]rowList.forEach(row =>{const index = rowList.indexOf(row)if (index % 2 !== 0){row.style.backgroundColor = '#FAFAFA'}else {row.style.backgroundColor = '#ffffff'}})}}

updated时调用，或者mounted是延时调用，视情况而定，总之要在表格实例化之后再调用

总结：推荐css