Ant Design Vue customRow 不起作用

ant design vue customRow 不起作用

ant design vue 网站中的实例
https://www.antdv.com/components/table-cn/

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

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

线上网友一般使用的方式(还是不生效，或许因为vue版本不同，或者其他环境问题)

html代码：customRow绑定一个click方法，名字自己可以随便起

<a-table
              :columns="columns"
              :data-source="data"
              :customRow='click'>

js代码：

methods： {
  click(record, index) {
  		return {
     		on: {
        		dblclick: () => {
          			console.log(record);
        		}
     		}
  		}
  }
}

​ 在js中的methods中创建方法click(record, index)。record与index 分别是该行的数据(可以获取到放在data-source中的所有属性，即使没有在表格中呈现出来的也可以获取到）和该行数据在表格中的下标。

​ 通过上面的写法，我可以在双击表格某一行的时候，打印出这一行所绑定的data的全部内容。

实际项目使用

<a-table
  :columns="columns"
  :data-source="data"
  :customRow='click'>
 
```

methods： {
click:function(row,rowIndex){
const thisSelf = this;
return {
onClick: () => {
console.log(row, rowIndex)
if(row.btyAccountingSubjectCode ==”1012”||row.btyAccountingSubjectCode ==”1131”||row.btyAccountingSubjectCode ==”2121”){
thisSelf.openBtyAssistAccountingBalanceInit(row);
}
}
};
/**

• 打开点击详情界面
  */
  openBtyAssistAccountingBalanceInit(row) {
  this.showBtyAssistAccountingBalanceInitParam = row;
  this.showBtyAssistAccountingBalanceInit = true;
  },
  }

```