vue3 element plus 插槽

Vue 3与Element Plus结合使用时，可以通过插槽来扩展组件的功能和样式。插槽可以在组件中定义内容的占位符，然后在使用组件的地方填充具体的内容。

在Element Plus中，很多组件都提供了插槽的支持，可以通过插槽来自定义组件的部分内容。例如，对于ElTable组件，可以通过插槽来自定义表格的列头和行内容。

下面是一个示例，展示如何在Vue 3和Element Plus中使用插槽：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column>
      <template #default="{ row }">
        <span>Custom Content - {{ row.name }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const tableData = ref([
      { name: 'John', age: 20 },
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 30 },
    ]);

    return {
      tableData,
    };
  },
};
</script>

在上面的代码中，我们通过`<template>`标签定义了一个插槽，并且指定了插槽的名称为`default`。在插槽中，我们可以通过`row`来访问当前行的数据，并自定义显示的内容。