ant antdesign antdesign vue 表格组件 实现隔行换色 效果

益泰平
2023-12-01

antdesign vue 表格实现隔行换色效果 (费乏不多佛)

① 先在用到表格组件的地方呢这样写 (加上 :customRow=“customRow”)
<a-table
:customRow="customRow"
>
</a-table>
② 然后在下面对应的 method 下 添加上对应的代码 如下 (recored,index 参数是组件自带的 必须要用 index来判断哪一行 然后 用三元运算符 给对应【奇数行,偶数行】添加不同的 背景颜色)
customRow ( record, index ) {
	return {
		style: {
			'background-color': index % 2 == 0 ? '#ffffff' : '#fafafa'
		}
	}
}

总结:两步 第一,先在使用表格组件的地方 添加上对应的 customRow 属性 ,第二,然后再从下面的方法中添加对应函数 让其返回 return 一个样式属性 ,齐活!!!

 类似资料: