Vue.js 如何在点击ant design vue表列标题时添加事件？

我有一个ant design vue表，希望在单击时添加事件以更改标题名称。但我无法添加单击事件并自定义列标题

---

当单击列标题将触发一个函数时，有什么方法可以实现这一点吗？

您可以为每个项目添加一个参数，例如“isClickable”，并在v-for的每个项目上放置一个单击侦听器，该侦听器将输入一个检查项目是否可单击的方法

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 },
];

导出默认值{
数据：（）=>({
栏目：[
{
标题：“姓名”，
数据索引：“名称”，
宽度：300，
是的，
},
{title:'Employee ID'，dataIndex:'displayId'，宽度：150}，
{title:'Normal'，dataIndex:'Normal.name'，宽度：100}，
{标题：“加班”，数据索引：“加班。名称”，宽度：100}，
{title:'Holiday'，dataIndex:'Holiday.name'，宽度：100}，
{title:'Rest Day'，dataIndex:'restDay.name'，宽度：100}，
],
}),
方法：{
单击列（列）{
if（column.isClickable）{
//执行代码
}否则{
返回空
}
},
},
}

我假设您正在使用此组件和此组件

通过指定

列.slots.title

，可以使用自定义标题：

const列=[
{
数据索引：“名称”，
关键字：“名称”，
插槽：{
标题：“自定义标题”
}
}
]

并定义您的

customTitle

插槽：

{{title}}

---

我以前试过，但标题没有改变，它在你的js小提琴上的工作。但不是在我的代码中。我尝试了这个

测试更改
和这个
{title:'Name'，slots:{title:'customTitle'}，dataIndex:'Name'，width:150，fixed:'left'，headerCell:'customs'，slots:{title:'customTitle'}
但是我得到它的时候还是没发生什么事情。这是因为我没有删除专栏标题。谢谢
<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>