How to add event on click on ant design vue table column title?

I assume you are using this Ant Design Vue and this Table component.

You can use custom title by specify column.slots.title:

const columns = [  {    dataIndex: 'name',    key: 'name',    slots: {      title: 'customTitle'    }  }]

And define your customTitle slot:

<span slot='customTitle'>  <div @click='editTitle'>{{ title }}</div></span>

Example

You can add a parameter for each item for example "isClickable" and put a click listener on each item of the v-for which will enter in a method that check if the item is clickable or not.

<template>    <div>        <div            v-for="column in columns"            @click="clickOnColumn(column)"        />    </div></template><script>export default {    data: () => ({        columns: [            {                title: 'Name',                dataIndex: 'name',                width: 300,                isClickable: true,            },            { title: 'Employee ID', dataIndex: 'displayId', width: 150 },            { title: 'Normal', dataIndex: 'normal.name', width: 100 },            { title: 'Overtime', dataIndex: 'overtime.name', width: 100 },            { title: 'Holiday', dataIndex: 'holiday.name', width: 100 },            { title: 'Rest Day', dataIndex: 'restDay.name', width: 100 },        ],    }),    methods: {        clickOnColumn(column) {            if (column.isClickable) {                // Execute code            } else {                return null            }        },    },}</script><style lang="scss" scoped></style>