如何用插槽实现一个复杂的表格组件？

最新推荐文章于 2025-10-23 18:24:45 发布

原创最新推荐文章于 2025-10-23 18:24:45 发布 · 311 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

要实现一个复杂的表格组件，可以使用 Vue 的插槽功能来创建一个灵活且可重用的表格。通过插槽，可以让用户自定义表格的标题、行、单元格内容等，增强组件的可配置性。以下是一个示例，展示如何用插槽实现一个复杂的表格组件。

1. 组件结构

我们将创建一个名为 CustomTable 的表格组件，支持插槽用于自定义表头和表格行。

CustomTable.vue

<template>
  <table>
    <thead>
      <tr>
        <slot name="header">
          <!-- 默认表头 -->
          <th>Default Header</th>
        </slot>
      </tr>
    </thead>
    <tbody>
      <slot name="body">
        <tr>
          <td>Default Row</td>
        </tr>
      </slot>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'CustomTable'
}
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
</style>

2. 使用示例

接下来，在父组件中使用 CustomTable，并利用插槽自定义表头和表格行。

ParentComponent.vue

<template>
  <div>
    <h1>My Custom Table</h1>
    <CustomTable>
      <template v-slot:header>
        <th>Name</th>
        <th>Age</th>
        <th>Occupation</th>
      </template>
      
      <template v-slot:body>
        <tr>
          <td>John Doe</td>
          <td>30</td>
          <td>Engineer</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>25</td>
          <td>Designer</td>
        </tr>
        <tr>
          <td>Mike Johnson</td>
          <td>40</td>
          <td>Manager</td>
        </tr>
      </template>
    </CustomTable>
  </div>
</template>

<script>
import CustomTable from './CustomTable.vue';

export default {
  components: {
    CustomTable
  }
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  margin-bottom: 16px;
}
</style>