I am using ANT design table, and my problem is that I need to add events to cells on a row, for example when I click on the column with the item named John Brown, a function A will be generated. , click on the age column and function B will be created. Currently I am using the below method and it requires me to click on the correct text tag to trigger the event instead of just clicking on the cell.
<template>
<a-table :columns="columns" :data-source="data" bordered>
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">
<a @click="test(text)">{{ text }}</a>
</template>
<template v-if="column.dataIndex === 'age'" @click="test(text)">
<a >{{ text }}</a>
</template>
</template>
</a-table>
</template>
<script setup lang="ts">
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 80,
},
{
title: 'Address',
dataIndex: 'test',
key: 'address 1',
ellipsis: true,}
];
const test = (text) => {
console.log(text)
};
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
tags: ['nice', 'developer'],
test: 'Vũ Đức Huy',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park, London No. 2 Lake Park',
tags: ['loser'],
test: 'Trần Văn Huy',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
test: 'Nguyễn Văn Vũ'
},
];
</script>
Is there any solution for me in this case?