vue antd表格点击某一行显示高亮怎么加 举简化例子

在Vue项目中使用Ant Design（AntD）库创建表格时，想要实现点击某一行高亮的效果，你可以这样做：

首先，安装AntD Table组件和其他依赖：

npm install @ant-design/icons @ant-design/vue @vue/cli-plugin-eslint --save

然后，在组件中导入需要的组件和样式，并设置一个`rowClassName` prop来动态添加行的样式：

<template>
  <a-table :columns="columns" :data-source="data" rowClassName="highlight-row">
    <!-- 其他table配置... -->
  </a-table>
</template>

<script setup>
import { defineComponent, ref } from 'vue';
import { Table } from '@ant-design/vue';

// 定义数据源
const data = [
  // 表格数据...
];

// 定义列配置
const columns = [
  {
    title: '标题',
    dataIndex: 'key',
    // 点击事件处理
    onClick: (record) => {
      // 当点击某一行时，更新行的class，例如将'table-row-active'添加到高亮行上
      const currentRowClass = record.key === 'clickedRecordKey'
        ? 'table-row-active' // 高亮类名，可以根据需求自定义
        : '';

      // 更新数据源中对应行的状态
      const updatedData = data.map((item) => (item.key === record.key ? { ...item, highlight: !item.highlight } : item));
      // 更新视图，这里的高亮状态通常会通过一个组件状态管理（如Vuex或响应式计算属性）
      setHighlightedRecord(currentRowClass);
    }
  },
  // 其他列配置...
];

// 假设你有一个store或者其他状态管理工具来保存高亮行的状态
const highlightedRecordRef = ref('');

function setHighlightedRecord(highlightClass) {
  highlightedRecordRef.value = highlightClass;
}
</script>

<style scoped>
.highlight-row {
  &.table-row-active {
    background-color: #f5f5f5; /* 高亮颜色，自定义 */
  }
}
</style>

在这个例子中，当用户点击某一行时，对应的`onClick`回调会被触发，根据当前点击的记录修改`highlightedRecord`的状态，同时更新`rowClassName`来改变该行的样式。