elementUI el-collapse 自定义折叠面板icon 和 样式 或文字展开收起

在Element UI中，您可以通过slot自定义el-collapse组件的折叠图标和样式。以下是如何自定义折叠面板图标和文本的示例代码：

<template>
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item title="自定义标题" name="1">
      <template slot="title">
        <!-- 这里可以放置自定义的图标和文本 -->
        <i class="custom-icon"></i>
        折叠面板
        <span v-if="activeNames.includes('1')">折叠</span>
        <span v-else>展开</span>
      </template>
      折叠面板内容
    </el-collapse-item>
  </el-collapse>
</template>
 
<script>
export default {
  data() {
    return {
      activeNames: ['1'], // 当前展开的面板名称数组
    };
  },
  methods: {
    handleChange(activeNames) {
      this.activeNames = activeNames;
    },
  },
};
</script>
 
<style>
.custom-icon {
  /* 这里定义自定义图标的样式 */
  font-size: 20px;
}
</style>

在这个例子中，我们使用了el-collapse-item的title slot来自定义折叠面板的标题。我们添加了一个自定义图标（.custom-icon）和根据面板状态显示的文本（折叠/展开）。通过监听activeNames数组的变化，我们可以动态更新图标和文本以反映当前的折叠状态。