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

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

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

这里是一个公共组件，增加了<slot name="dog"><slot>一个具名插槽

  <el-table :data="data.tableData" border style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
    <el-table-column label="操作">
      <template #default="scope">
        <slot name="dog"></slot>
      </template>
    </el-table-column>
  </el-table>

但是由于父组件使用这个组件时也会用到<template #dog></template>

  <div class="container">
    <Name>
      <template #dog">
        <el-button @click="getData(scope.row)">详情</el-button>
      </template>
    </Name>
  </div>

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

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

1.给子组件具名插槽绑定动态属性row

2.在父组件使用具名插槽时用scope来接收

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

子组件

  <el-table :data="data.tableData" border style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
    <el-table-column label="操作">
      <template #default="scope">
        <slot name="dog" :row="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>

父组件

  <div class="container">
    <Name>
      <template #dog="scope">
        <el-button @click="fff(scope.row)">啊啊啊</el-button>
      </template>
    </Name>
  </div>