Vue插槽在表格中的使用

加油，新时代打工人！

vue插槽的使用

在表格中使用Vue插槽可以为表格的各个部分提供自定义内容，例如表头、表格行或列等。以下是一个简单的示例，展示了如何在表格中使用插槽：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="person in persons" :key="person.id">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
        </tr>
      </tbody>
      <tfoot>
        <slot name="footer"></slot>
      </tfoot>
    </table>
  </div>
</template>

在这个例子中，我们定义了一个简单的表格组件。表格的表头部分固定为"姓名"和"年龄"两列，并使用元素进行渲染。表格的数据部分使用v-for指令遍历persons数组，并将每个人的姓名和年龄渲染为表格行。

在表格的底部部分，我们使用了一个插槽来提供自定义的表格页脚内容。通过标签，插槽将被父组件中的内容所替换。在父组件中，你可以使用元素和v-slot指令来定义表格的页脚内容。

下面是一个父组件使用表格组件并自定义表格页脚的示例：

<template>
  <div>
    <MyTable>
      <template v-slot:footer>
        <tr>
          <td colspan="2">总人数：{{ persons.length }}</td>
        </tr>
      </template>
    </MyTable>
  </div>
</template>

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

export default {
  components: {
    MyTable
  },
  data() {
    return {
      persons: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 },
        { id: 3, name: '王五', age: 28 }
      ]
    };
  }
}
</script>