ANT DESIGN VUE中table表格设置隔行变色

最新推荐文章于 2024-07-12 17:56:59 发布

原创最新推荐文章于 2024-07-12 17:56:59 发布 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文介绍如何在Vue.js中使用Ant Design Table组件，通过自定义`customRow`方法实现表格行的背景色和字体颜色动态变化。方法包括根据索引调整行背景色，并根据数据特性设置字体颜色。

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


methods：{
//设置表格隔行变色
    customRow(record, index) {
      return {
        style: {
          // 字体颜色
          color: record.remarkDesc ? record.remarkDesc.fontColor : '#262626',
          // 行背景色
          'background-color': index % 2 == 0 ? '#FAFAFA' : '#FFFFFF'
        }
      }
    },
}

在html中绑定:customRow="customRow"，双引号里面函数名可以随意命名

在mothods中定义函数