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

Question

const columns = [
{ title: 'Name', dataIndex: 'name', width: 300
onHeaderCell: column => {
return {
onClick: e => {
this.customize(e);
},
};
},},
{ 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 },
];
I have an ant design vue table and want to add event on click to change the title name. But I can't add on click event and customize the column title.
Is there any way to make this happen when click the column title will triggered a function?

Answer 1

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

Answer 2

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>