el-table表格添加具名插槽并传递数据

el-table表格添加具名插槽并传递数据,第1张

以下举例使用vite+vue3+element plus
我在 *** 作栏内,使用默认template获取了表格的行内数据scope

*** 作栏内的按钮之类的需要自己来自定义

这里是一个公共组件,增加了一个具名插槽

  
    
    
    
    
      
    
  

但是由于父组件使用这个组件时也会用到

  
    
      
    
  

这种情况是拿不到行内数据的,具体原因博主也不是很清楚,可能是由于template嵌套的原因

经过多番测试,最终改为了以下解决方案(不代表唯一解决方案,博主是自己测试出来的)

1.给子组件具名插槽绑定动态属性row 2.在父组件使用具名插槽时用scope来接收

这父组件的插槽内的按钮就可以拿到表格行内的数据了

子组件

  
    
    
    
    
      
    
  

父组件

  
    
      
    
  

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1320542.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表(0条)

保存