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方法

你可能感兴趣的:(Ant design vue框架,table控件中customRow用法的一个坑)