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

在Vue2中，可以通过以下方式对el-table表格添加具名插槽并传递数据：

<el-table :data="tableData">
  <el-table-column prop="name" label="Name">
    <template slot-scope="{ row }">
      <slot name="name" :row="row"></slot>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="Age">
    <template slot-scope="{ row }">
      <slot name="age" :row="row"></slot>
    </template>
  </el-table-column>
</el-table>

在这个例子中，我们在el-table-column的模板中使用了`slot-scope`指令来传递每一行的数据对象。然后我们在具名插槽中使用了`:row`属性来访问该数据对象。

在父组件中，我们可以这样使用这些具名插槽：

<template>
  <my-table>
    <template #name="{ row }">
      {{ row.name }}
    </template>
    <template #age="{ row }">
      {{ row.age }}
    </template>
  </my-table>
</template>

在Vue3中，可以使用`<template v-slot:xxx>`语法来定义具名插槽，并使用`<slot name="xxx">`语法来使用它们。以下是一个示例：

<el-table :data="tableData">
  <el-table-column prop="name" label="Name">
    <template v-slot:name="{ row }">
      <slot name="name" :row="row"></slot>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="Age">
    <template v-slot:age="{ row }">
      <slot name="age" :row="row"></slot>
    </template>
  </el-table-column>
</el-table>

在父组件中，我们可以这样使用这些具名插槽：

<template>
  <my-table>
    <template #name="{ row }">
      {{ row.name }}
    </template>
    <template #age="{ row }">
      {{ row.age }}
    </template>
  </my-table>
</template>

请注意，Vue3中使用的具名插槽语法与Vue2中略有不同。在Vue3中，我们使用`v-slot`指令来定义插槽，而在Vue2中我们使用`slot-scope`指令。