0

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?

0 Answers0