如何在 ant-design-vue 表中选择整行？

Question

我有一个 ant-design-vue 表，它具有选择行并使用记录打开一个新抽屉的功能。

这是表格的模板。

<a-table
    :dataSource="employeeData"
    :rowKey="record => record.sgid"
    :pagination="{ pageSize: size }"
    :columns="columns"
    :loading="loading"
    :scroll="{ x: 1300, y: 400 }"
    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  >
    <template slot="name" slot-scope="text, record">
      <div class="click-event" @click="select(record)">{{ text }}</div>
    </template>
    <template slot="id" slot-scope="text, record">
      <div class="click-event" @click="select(record)">{{ text }}</div>
    </template>
    <template slot="mobile" slot-scope="text, record">
      <div class="click-event" @click="select(record)">{{ text }}</div>
    </template>
</a-table>

使用此代码，我将<div> 添加到所有插槽，以便用户可以单击每列中的任意位置。但在一行中的两列之间仍有一些空白区域无法点击。我应该怎么做才能让用户可以点击一行来运行选择功能？

Answer 1

将您的列包裹在 Link 周围以进行重定向，而不是 HTML 锚标记 <a> <slots /> </a>。

---

• react-router-dom

您可以使用来自react-router-dom 的链接并使用它来触发您的组件或容器。这也会将你的槽函数逻辑隔离在一个单独的组件或容器中

import { Link } from 'react-router-dom';

...

 <Link to={`/redirect/to/slot-function-component/`}>
  <Row Content />
 </Link>

...

在routes.js中注册这个组件很重要

---

• Ant 设计：锚组件

如果您要坚持使用 Ant Design，那么您可能想探索Anchor Component API。 Anchor Props 和 Link Props 为您提供了许多选项来以多种方式实现您的用例。

探索 API，看看有什么适合您的要求。