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?