在 Ant Design Vue 中，Table 组件的 customRow 属性--自定义表格行的行为和样式

1. 基本用法

首先，确保项目中已经安装并引入了 ant-design-vue，然后在 Vue 组件中使用 Table 组件，并配置 customRow 属性。

<template> 
    <a-table :dataSource="data" 
    :columns="columns" :rowKey="record => record.key"                                     
    :customRow="customRow"> 
    </a-table> 
</template>
<script> 
import { Table } from 'ant-design-vue'; 
export default { components: { ATable: Table }, 
data() { 
    return { 
        data: [ 
            { key: 1, name: 'John Doe', age: 28 }, { key: 2, name: 'Jane Doe', age: 22 },                                                         
        ], 
        columns: [ 
            { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' },
         ] 
    };
},
methods: { 
    customRow(record, index) { 
        return { 
            on: { 
                click: () => { 
                    this.handleRowClick(record);
                }, 
                mouseenter: () => { 
                    console.log('Mouse entered row:', index); 
                } 
            }, 
            style: { 
                cursor: 'pointer', 
                background: index % 2 === 0 ? '#f0f0f0' : '#ffffff' 
            } 
        }; 
    }, 
        handleRowClick(record) { 
            console.log('Clicked row:', record); 
        } 
   } 
}; 
</script>

2. 示例解析

在这个示例中，我们通过 customRow 方法为每一行设置了不同的事件和样式：

• 点击事件：当用户点击行时，调用 handleRowClick 方法，并传递当前行的数据 record，输出点击行的信息。
• 鼠标移入事件：在 mouseenter 事件中输出当前行索引，方便查看鼠标是否进入了该行。
• 样式设置：我们根据行索引设置了背景颜色，使得奇偶行有不同的颜色，提升表格的可读性。

3. 自定义样式和条件渲染

可以根据数据内容，动态设置行的样式或行为。例如，当用户的年龄大于 25 时，为行添加不同的背景色：

customRow(record, index) { 
    return { 
        on: { 
            click: () => { 
                this.handleRowClick(record); 
            } 
        }, 
        style: { 
            cursor: 'pointer', background: record.age > 25 ? '#e6f7ff' : '#ffffff', // 根据条件设置背景色 
            color: record.age > 25 ? '#10ff' : '#000000' // 根据条件设置字体颜色 
        } 
    }; 
}

4. customRow 常见配置

在 customRow 返回的对象中，可以配置以下属性：

• on：用于绑定事件（如 click、mouseenter 等），让行的交互更丰富。
• style：用于自定义行样式，例如背景色、字体颜色等。
• className：用于指定 CSS 类名，可以在外部定义好样式，然后通过类名直接应用到行。

总结

customRow 是一个灵活的配置项，允许开发者自定义每一行的事件和样式。通过 customRow，你可以轻松实现行点击、高亮、条件样式等功能，使表格更符合项目的交互需求。