el-card点击header部分隐藏显示body部分

在Vue.js中，你可以使用el-card组件并结合v-if或v-show指令来实现点击header部分隐藏显示body部分的功能。以下是一个简单的示例：

<template>
  <el-card class="box-card" @header-click="toggleBody">
    <template #header>
      <div>
        Card Name
        <i class="el-icon-arrow-down" :class="{ 'el-icon-arrow-right': !isBodyVisible }"></i>
      </div>
    </template>
    <div v-show="isBodyVisible">
      <!-- Card's body content -->
      <p>Card content</p>
    </div>
  </el-card>
</template>
 
<script>
export default {
  data() {
    return {
      isBodyVisible: true
    };
  },
  methods: {
    toggleBody() {
      this.isBodyVisible = !this.isBodyVisible;
    }
  }
};
</script>
 
<style>
.box-card {
  width: 300px;
}
</style>

在这个例子中，el-card组件的header-click事件被用来触发toggleBody方法，该方法改变isBodyVisible数据属性的值。v-show指令绑定到isBodyVisible上，决定card的body部分是否显示。点击头部时，箭头图标会改变方向，指示body内容的显示状态。