ant design of VUE 表格头点击双击事件

一开始我以为也是像customRow 一样是写在a-table里面就行了，于是开始上手操作，发现没有一点一效果经过一阵子研究原来customHeaderCell是写在columns里面的

话不多说上代码

const columns = [
  {
    title: 'xxx',
    dataIndex: 'time',
    key: 'time',
    align: "center",
    customHeaderCell:columns=>{
        return{
        on:{
            click:()=>{
                console.log('点击事件',columns)
            },
            dblclick:()=>{
               console.log('双击事件',columns)
            }
        }
      }
    }
  },
];

这个时候就在有此函数的表头上就已经有了相应的事件了

---

当然了，作为表格肯定不能只有一个表头，肯定不能每个上面都写这样一个函数，下面我们就进行函数提取

function customHeaderCell(params) {
  return{
    on:{
      click:()=>{
        console.log('函数封装点击事件',params,1)
      },
      dblclick:()=>{
        console.log('函数封装双击击事件',params,2)
      }
    }
  }
}

const columns = [
  {
    title: 'xxx',
    dataIndex: 'time',
    key: 'time',
    align: "center"
  },
  {
    title: 'xxx',
    dataIndex: 'x1',
    key: 'x1',
    align: "center",
    customHeaderCell:customHeaderCell
  },
  {
    title: 'xxx',
    dataIndex: 'x2',
    key: 'x2',
    align: "center",
    customHeaderCell:customHeaderCell
  },
  {
    title: 'xxx',
    key: 'x3',
    dataIndex: '3',
    scopedSlots: { customRender: 'x3' },
    align: "center",
    customHeaderCell:customHeaderCell
  }
];

这样一个简单的函数提取就搞定了