使用 Scoped Slots

使用Scoped Slots（作用域插槽）可以让你在 Element UI 的 el-collapse-item 中自定义标题的样式和内容。Scoped Slots 允许你访问来自父组件的数据，并在子组件内部使用这些数据来渲染自定义的内容。

下面是使用Scoped Slots来自定义 el-collapse-item 标题的一个示例：

<template>
  <el-collapse>
    <el-collapse-item :title="$t('customTitle')">
      <template #title>
        <div class="custom-title">
          {{ customTitle }}
        </div>
      </template>
      这是内容
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      customTitle: '自定义标题'
    };
  }
};
</script>

<style scoped>
.custom-title {
  color: red;
  font-size: 18px;
  /* 更多自定义样式 */
}
</style>

在这个例子中，我们创建了一个名为 custom-title 的类，并在 style 标签中定义了这个类的样式。然后我们使用了一个名为 #title 的Scoped Slot来替换默认的标题，并将自定义的标题内容放入其中。

这里的 {{ customTitle }} 是从父组件的数据中获取的，你也可以使用来自任何数据源的数据，比如从 API 获取的数据或计算属性等。

步骤详解：

1. 创建Scoped Slot:

   • 在 el-collapse-item 中使用 <template #title> 来定义Scoped Slot。
   • #title 是一个特殊的插槽名称，Element UI 的 el-collapse-item 会寻找这个插槽来替换默认的标题。

2. 自定义内容:

   • 在 <template #title> 中编写自定义的内容，如上述示例中的 <div class="custom-title">....

3. 定义样式:

   • 使用 <style scoped> 来定义自定义内容的样式。
   • 在本例中，.custom-title 类被用来设置标题的颜色和字体大小。

4. 使用数据:

   • 通过 Vue 的数据绑定机制，可以将组件的数据绑定到自定义内容中，如 {{ customTitle }}。

这种方法的好处是，你可以完全控制标题的外观和行为，并且可以灵活地使用来自父组件的数据。这对于需要高度定制化的场景非常有用。