Vue中的el-card实现点击header收起body

可以通过给el-card的header添加click事件来实现点击收起body的效果，具体代码如下：

<template>
  <el-card>
    <div slot="header" @click="collapse = !collapse">
      <span>{{ title }}</span>
      <i class="el-icon-arrow-down" v-show="!collapse"></i>
      <i class="el-icon-arrow-up" v-show="collapse"></i>
    </div>
    <div v-show="!collapse">
      <p>{{ content }}</p>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      collapse: false,
      title: 'Card Title',
      content: 'This is the content of the card',
    };
  },
};
</script>

在这个例子中，我们使用了一个collapse变量来控制是否展开卡片的内容。在header的click事件中，我们通过改变collapse的值来实现展开和收起的效果。在展开的状态下，我们显示卡片的内容，否则隐藏内容。同时，我们也根据collapse的值来显示不同的箭头图标。