Ant design vue框架，table控件中customRow用法的一个坑

Ant design vue框架中，table控件中customRow用法的一个坑

今天在写代码时，用到Ant design框架中的控件，其中的一个需求是：点击table中的一行，需要执行一些操作。因为没有默认的行点击事件，需要用到customRow来进行自定义。
这个方法，在官方的文档中，有使用说明，如下：

<Table
  customRow={
     (record) => {
     
    return {
     
      props: {
     
        xxx... //属性
      },
      on: {
      // 事件
        click: (event) => {
     },       // 点击行
        dblclick: (event) => {
     },
        contextmenu: (event) => {
     },
        mouseenter: (event) => {
     },  // 鼠标移入行
        mouseleave: (event) => {
     }
      },

    };
  )}
  customHeaderRow={
     (column) => {
     
    return {
     
      on: {
     
        click: () => {
     },        // 点击表头行
      }
    };
  )}
/>

官方的这个写法，应该是属于lamada的语法，今天我在使用时，也是使用这种写法。
如下：

methods:{
		getDetailList(id){
				//执行具体的操作
			},
		rowClick: (record, index) => ({
  	    // 事件
  	    on: {
     	   click: event => {
     	     // 点击该行时要做的事情
     	     console.log('record', record)
     	     console.log('index', index)
     	     console.log('event', event)
   	       this.getDetailList(record.id)  //这一行会报错，报未定义
    	    }
	      }
  	  })
    }

在执行时，会报错，如下：
[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘getDetailList’ of undefined”。
不使用lamada表达式，则不会出现这样的问题，修改后的rowClick方法如下：

rowClick(record, index) {
      return {
        on: {
          click: () => {
            console.log(record, index)
            this.getDetailList(record.matbillid)
          }
        }
      }
    },

可正常执行，并能正确调用getDetailList方法