您好,欢迎来到测品娱乐。
搜索
您的当前位置:首页ant design vue给table设置斑马条纹样式

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设置:

参考链接:

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

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- cepb.cn 版权所有 湘ICP备2022005869号-7

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务