Naive UI 数据表格行选中高亮实现方案

在Naive UI的n-data-table组件中实现行选中高亮效果是一个常见的需求。本文将详细介绍如何通过row-props属性实现类似Element Plus的单行选中高亮效果。

核心实现原理

Naive UI的n-data-table组件提供了row-props属性，允许开发者自定义行的属性和事件。我们可以利用这个特性来实现行选中高亮效果。

具体实现步骤

1. 定义选中状态：使用ref或reactive定义一个响应式变量来存储当前选中的行数据
2. 配置row-props：为表格配置row-props函数，根据当前行是否被选中来设置不同的样式
3. 添加点击事件：在row-props中为行添加点击事件，点击时更新选中状态

完整代码示例

<template>
  <n-data-table
    :columns="columns"
    :data="data"
    :row-props="rowProps"
  />
</template>

<script setup>
import { ref } from 'vue'

const selectedRow = ref(null)

const rowProps = (row) => {
  return {
    style: {
      backgroundColor: selectedRow.value === row ? 'rgba(250, 250, 252, 1)' : 'transparent',
      cursor: 'pointer'
    },
    onClick: () => {
      selectedRow.value = row
    }
  }
}

// 表格数据和列定义
const data = [...]
const columns = [...]
</script>

样式优化建议

1. 过渡效果：可以添加CSS过渡效果使高亮变化更平滑
2. 悬停效果：为行添加:hover伪类提升用户体验
3. 自定义颜色：根据项目主题调整高亮颜色

注意事项

1. 确保row对象是可比较的，如果是复杂对象可能需要特殊处理
2. 高亮样式要考虑暗黑模式的兼容性
3. 在多选场景下需要调整实现逻辑

通过这种方式实现的单行选中高亮效果既保持了UI的简洁性，又提供了良好的用户交互体验，是Naive UI项目中处理行选中状态的推荐方案。