el-collapse-item 去除 el-collapse-item__arrow

`el-collapse-item` 是 Element UI 中的一个组件，用于实现折叠面板的功能，通常用于展示和隐藏内容列表。`el-collapse-item__arrow` 是这个组件中的一个箭头图标，表示展开或折叠的状态。

如果你想在使用 `el-collapse-item` 时去除箭头，可以通过 CSS 样式来实现。在 Vue 的单文件组件中，你可以这样做：

<template>
  <el-collapse-item :class="{ 'no-arrow': showNoArrow }">
    <div slot="header" slot-scope="{ header, collapsed }">
      {{ header }}
      <span v-if="!showNoArrow"> <i class="el-collapse-item__arrow"></i> </span>
    </div>
    <p>{{ item.content }}</p>
  </el-collapse-item>
</template>

<script>
export default {
  data() {
    return {
      showNoArrow: false, // 初始不显示箭头
      // ... 其他数据
    };
  },
  // ... 方法
};
</script>

<style scoped>
.no-arrow .el-collapse-item__arrow {
  display: none;
}
</style>

在上面的代码中，我们通过绑定 `:class` 属性来动态控制 `el-collapse-item__arrow` 的显示。当 `showNoArrow` 为 `true` 时，CSS 规则会隐藏箭头。你可以根据实际需求来调整这个布尔值。

相关问题：
1. 如何通过Vue的指令控制el-collapse-item的样式？
2. 在Element UI中，如何实现组件状态改变时动态地添加或移除CSS类？
3. 如何在Element UI中编写自定义CSS以覆盖内置样式？