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

在Vue2中，可以通过以下代码来给el-table添加动态具名插槽并传递数据：

<el-table :data="tableData">
  <el-table-column prop="name" label="Name">
    <template v-for="(item, index) in dynamicSlots">
      <template v-if="item.type === 'name'">
        <template v-slot:[`name-${index}`]="{row}">
          {{ item.value }}: {{ row.name }}
        </template>
      </template>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="Age">
    <template v-for="(item, index) in dynamicSlots">
      <template v-if="item.type === 'age'">
        <template v-slot:[`age-${index}`]="{row}">
          {{ item.value }}: {{ row.age }}
        </template>
      </template>
    </template>
  </el-table-column>
</el-table>

其中，`dynamicSlots`是一个数组，用于存储动态插槽的数据。每个数据项包含一个`type`属性和一个`value`属性，分别表示插槽的类型和插槽的内容。

在Vue3中，可以通过以下代码来给el-table添加动态具名插槽并传递数据：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name">
      <template v-for="(item, index) in dynamicSlots">
        <template v-if="item.type === 'name'" v-slot:[`name-${index}`]="{row}">
          {{ item.value }}: {{ row.name }}
        </template>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="Age">
      <template v-for="(item, index) in dynamicSlots">
        <template v-if="item.type === 'age'" v-slot:[`age-${index}`]="{row}">
          {{ item.value }}: {{ row.age }}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30 },
        { name: 'Mike', age: 25 },
        { name: 'Jane', age: 20 }
      ],
      dynamicSlots: [
        { type: 'name', value: 'Name' },
        { type: 'age', value: 'Age' }
      ]
    }
  }
}
</script>

与Vue2相比，Vue3中的动态具名插槽需要使用`v-slot:[slotName]`的语法来定义。同时，Vue3中也不需要使用`template`标签来包裹具名插槽的内容。