vue table 中slot-scope和slot

在 Vue 的表格组件中，`slot-scope` 和 `slot` 都是用于自定义表格列的内容的槽（slot）。

`slot-scope` 是用来传递数据给插槽的一种特殊语法。它可以在插槽中访问到父组件中的数据，并进行处理或展示。在表格组件中，`slot-scope` 可以用于自定义每一列的内容。

例如，假设有一个表格组件显示学生列表，其中每一行都包含学生的姓名和成绩。你可以使用 `slot-scope` 来传递学生对象给插槽，在插槽中根据学生对象的属性展示数据。

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>成绩</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="student in students" :key="student.id">
        <td>{{ student.name }}</td>
        <td>
          <slot name="score" :student="student">
            {{ student.score }}
          </slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

在上面的代码中，`<slot>` 标签用于定义插槽，并通过 `name` 属性指定插槽的名称为 "score"。通过 `:student="student"` 将学生对象传递给插槽。如果没有指定插槽内容，则默认显示学生的成绩。

在使用表格组件时，你可以在组件内部使用 `template` 标签来自定义每一列的内容，并通过 `slot-scope` 获取学生对象并展示数据。

<template>
  <div>
    <my-table :students="students">
      <template slot="score" slot-scope="{ student }">
        <span v-if="student.score >= 60">及格</span>
        <span v-else>不及格</span>
      </template>
    </my-table>
  </div>
</template>

在上面的代码中，通过 `<template>` 标签定义了名为 "score" 的插槽，并使用了 `slot-scope` 获取学生对象。根据学生的成绩进行判断，展示不同的内容。

总结来说，`slot-scope` 是用于传递数据给插槽的语法，而 `slot` 则是用于定义插槽的标签。通过使用这两个概念，可以实现灵活的表格列内容定制。