el-collapse-item title 自定义样式

在 Element UI 中，el-collapse-item 是一个可折叠面板组件，它通常用于构建手风琴风格的折叠面板。如果你想要自定义 el-collapse-item 的标题（title）样式，可以通过使用 scoped slots 或者直接修改类名来实现。

方法 1: 使用 Scoped Slots

Scoped slots 可以让你完全控制 el-collapse-item 标题的内容和样式。下面是一个例子：

<el-collapse>
  <el-collapse-item :title="$t('customTitle')">
    <template #title>
      <div class="custom-title">
        自定义标题
      </div>
    </template>
    这是内容
  </el-collapse-item>
</el-collapse>

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

在这个例子中，我们使用了 #title slot 来替换默认的标题，并且给它添加了一个 .custom-title 类来应用自定义样式。

方法 2: 修改类名

如果你只是想简单地修改标题的样式而不需要改变其内容，你可以直接修改 Element UI 提供的类名。例如，如果你想修改所有 el-collapse-item 的标题样式，可以在全局 CSS 文件或者 <style> 标签中添加以下代码：

.el-collapse-item__header {
  background-color: #f5f7fa; /* 背景颜色 */
  border-bottom: 1px solid #ebeef5; /* 边框 */
}

.el-collapse-item__header .el-collapse-item__name {
  color: #606266; /* 文字颜色 */
  font-size: 16px; /* 字体大小 */
}

这种方式会作用于所有的 el-collapse-item 标题。

方法 3: 使用深度选择器 (::v-deep)

如果是在 Vue 单文件组件 (SFC) 内部使用 scoped styles，你需要使用深度选择器 (::v-deep) 来覆盖 Element UI 的样式：

<template>
  <el-collapse>
    <el-collapse-item title="标题">
    </el-collapse-item>
  </el-collapse>
</template>

<style scoped>
::v-deep .el-collapse-item__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

::v-deep .el-collapse-item__header .el-collapse-item__name {
  color: #606266;
  font-size: 16px;
}
</style>

以上方法都可以用来自定义 el-collapse-item 的标题样式。根据你的具体需求选择最合适的方法。