使用 Vue 3 插槽解决表格二次封装问题

2023-12-21 04:27:52

在 Vue 3 中，插槽是一个强大的工具，它允许我们在组件之间创建灵活的连接。通过使用插槽，我们可以将内容从一个组件动态地插入到另一个组件中，从而实现代码重用和模块化。

在 Vue 2 中，表格封装通常是通过使用渲染函数来实现的。

<template>
  <el-table :data="data" :columns="columns">
    <el-table-column
      prop="name"
      label="姓名"
    >
      <template slot-scope="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  props: ['data', 'columns'],
  render() {
    return (
      <el-table :data="data" :columns="columns">
        {this.$scopedSlots.default}
      </el-table>
    )
  }
}
</script>

在 Vue 3 中，我们可以使用插槽来实现同样的效果，而无需渲染函数。

<template>
  <el-table :data="data" :columns="columns">
    <template #default="scope">
      {{ scope.row.name }}
    </template>
  </el-table>
</template>

<script>
export default {
  props: ['data', 'columns']
}
</script>

使用插槽的好处是它可以让我们更灵活地控制插入的内容。我们可以根据需要定义多个插槽，并使用 v-slot 指令来指定每个插槽的位置。

例如，我们可以为表头和表尾定义单独的插槽：

<template>
  <el-table :data="data" :columns="columns">
    <template #header>
      <thead>
        <tr>
          <th>姓名</th>
          <!-- 其他列 -->
        </tr>
      </thead>
    </template>
    <template #footer>
      <tfoot>
        <tr>
          <th>合计</th>
          <!-- 其他列 -->
        </tr>
      </tfoot>
    </template>
  </el-table>
</template>

<script>
export default {
  props: ['data', 'columns']
}
</script>