1
votes

i have an ant-design-vue table which has the function to select the row and open a new drawer with the record.

this is the template of the table.

<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>

with this code i add a <div> to all slot so that user can click anywhere in every column. but there is still some empty space between two column in a row that cannot be click. what should i do to make the user can click on a row to run the select function?

1
Could you add a online demo please? It might help us to answer you.Arman

1 Answers

0
votes

Wrap your column around a Link for redirection instead of an HTML anchor tag <a> <slots /> </a>.


  • react-router-dom

You could use Link from react-router-dom and use it to trigger your component or container. This will also isolate your slot function logic in a separate component or container

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

...

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

...

It is important to register this component in a routes.js


  • Ant Design: Anchor Component

If you're going to stick with Ant Design, then you might wanna explore Anchor Component API. Anchor Props and Link Props provides you with lots of options to implement your use case in multiple ways.

Explore the API and see what suits your requirements.