Ant Design of Vue表格点击行展开与操作单元格冲突

Ant Design of Vue表格点击行展开与操作单元格冲突

问题：

使用Ant Design of Vue的Table组件，实现表格嵌套表格，并且点击父表格行展开子表格，由于父表格中有操作单元格，点击编辑或者删除时候，子表格也会切换显示。

原因:

事件冒泡，点击编辑或者删除时候，点击事件冒泡到父表格行，触发了父表格行的点击事件，才会出现上面的问题。

解决办法：

既然是事件冒泡，那就阻止冒泡，vue中有事件修饰符可以解决。

• 给编辑和删除分别阻止冒泡（父表格）

  编辑
  
  
   删除
  
  

  注意：删除的阻止冒泡要加在a-popconfirm内部

• 给编辑表格的最外层加，此时只需要一个（父表格）

  
  	编辑
  	
  	
  		删除