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

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

在使用el-card时需要显示隐藏body部分
点击姓名和图标可以显示隐藏

第一种方式

动态绑定class当show为false时就使用card-style2类

<!--动态-->
<el-card :class="{'card-style2':this.show==false}">
	<div slot="header" class="clearfix">
        <span @click="this.show=!this.show">标题</span>
    </div>
    <div v-if="show">
        卡片内容
    </div>
</el-card>

<style lang="scss" scoped>
.card-style2{
    /deep/ .el-card__header{
        padding: 10px !important;
        line-height: 22px;
        font-size: 16px;
        height: 45px;
        background: #D9ECFF;
    }
    /deep/ .el-card__body{
        display: none;
        background: #ECF5FF;
    }
}  
</style>  

第二种方式

使用方法，在方法里根据show的值添加display属性

<el-card :ref="'card'+index">
        <div slot="header" class="clearfix">
            <span @click="isshow">标题</span>
        </div>
        <div v-if="item.show">
            卡片内容
        </div>
    </el-card>
</div>

<script>
export default{
    data(){
        return{
            
        }
    },
    methods:{
         isshow(item,index){
            const elCardComponent = this.$refs['card' + index][0];
        	console.log(elCardComponent)
        	const elCardDOM = elCardComponent.$el;
        	const elCardBody = elCardDOM.querySelector('.el-card__body');

        	elCardBody.style.display = item.show ? 'none' : 'block';
        	item.show = !item.show;
        }
    }
}
</script>

第三种方式

前两种都是没有动画的，这种使用的是element的动画效果；但是有一个小bug，因为.el-card__body没办法直接设置display：none，所以就将body的padding全部去掉，在下边的div中写了padding，这样造成的结果是展开的时候body的下边部分就没有动画效果

<el-card>
    <div slot="header" class="clearfix">
        <span @click="this.show=!this.show">标题</span>
    </div>
    <el-collapse-transition>
    	<div v-if="show"  style="padding: 15px 30px;">
        	卡片内容
    	</div>
    </el-collapse-transition>
    
</el-card>
<script>
export default{
    data(){
        return{
            
        }
    },
    methods:{
        isshow(){
            this.show = !this.show
        }
	}
}
</script>
<style>
    .el-card{
        /deep/ .el-card__body{
            background: #ECF5FF;
            padding: 0px !important;
    	}
    }
</style>

以下是我的完整代码

我这个是在table的展开列中使用的el-card，所以数据是tableData

<el-table-column type="expand" label="明细" width="45">
    <template slot-scope="scope">
		<div style="display: flex;padding: 0 35px;">
    		<el-divider direction="vertical"></el-divider>

    		<div style="width: 1050px;">
        		<div class="flag-style">
            	<b>学生信息</b>
        	</div>
        	<div style="width: 100%;padding-top: 10px;padding-left: 15px;"  v-for="(item,index) in scope.row.details">
            	<el-card :ref="'card'+index">
                	<div slot="header" class="clearfix">
                    	<span style="color: #478FCA;cursor: pointer;"><i class="el-icon-printer"></i>&nbsp;
                        	<span @click="bodyHide(item,index)">{{ item.name }}-{{ scope.row.degree}}</span>
        				</span>
                    	<el-button v-show="item.show == false" @click="item.show = true" style="float: right;min-width: 20px;height: 17px;line-height: 17px;" icon="el-icon-caret-bottom" type="text"></el-button>
                    	<el-button v-show="item.show == true" @click="item.show = false" style="float: right;min-width: 20px;height: 17px;line-height: 17px;" icon="el-icon-caret-top" type="text"></el-button>
        			</div>
                	<el-collapse-transition>
                    	<div v-show="item.show" style="padding: 15px 30px;">
                        	<el-row class="row-style">
                            	<el-col :span="4">姓名：</el-col>
                            	<el-col :span="20">
                                	<el-tag size="medium"
                                        :key="key.hobbyName"
                                        v-for="key in item.hobbys"
                                        style="margin-right: 10px;"
                                        effect="dark">
                                    {{key.hobbyName}}</el-tag>
        						</el-col>
                            </el-row>
                            <el-row class="row-style">
                                <el-col :span="4">学业状态：</el-col>
                                <el-col :span="20">
                                    <span v-for="key in tagTtems" v-if="item.status == key.status ? key.show = true : key.show = false" >
                                        {{ key.label }}({{ item.date }})</span>
                                </el-col>
                            </el-row>
                        
                            <el-row class="row-style" v-show="item.status == 2" style="margin-top:12px;color: #478FCA;">
                                <el-col :span="4"><i class="el-icon-view">点击明细</i></el-col>
                                <el-col :span="4"><i class="el-icon-printer">点击打印个人信息单</i></el-col>
                            </el-row> 
                        </div>
                    </el-collapse-transition>
                </el-card>
            </div>
        	</div>
        </div>
    </template>
</el-table-column>
<script>
export default{
    data(){
        return{
             tableData: [{
                education: '大学',
                degree:'本科',
                schoolNum:'00001'
                details: [{ 
                    name:'晏几道',
                    studentNum: '1234567',               
               		date: '', //入学日期
                    hobbys:[{
                        hobbyName:'唱歌，曾参加全国歌唱比赛获二等奖',
                    },{
                        hobbyName:'画画，主办学校板报画',
                    }],     
                    status:'0', //状态   0：待入学  1：学习中 2：已毕业
                    show:true,                          
                },{
                     name:'李商隐',
                    studentNum: '1234567',               
               		date: '2021-09-01', //入学日期
               		major:'软件工程',
                    hobbys:[{
                        hobbyName:'跳舞',
                    }],     
                    status:'1', //状态   0：待入学  1：学习中 2：已毕业
                    show:false, 
                },{
                    name:'李煜',
                    studentNum: '1234567',               
               		date: '2020-09-01', //入学日期
               		major:'电子信息',
                    hobbys:[{
                        hobbyName:'跑步',
                    }],     
                    status:'2', //状态   0：待入学  1：学习中 2：已毕业
                    show:false, 
                }],
                }, {
                    education: '专科',
	                degree:'大专',
	                schoolNum:'000009'
	                major:'电气自动化',
	                details: [{ 
	                    name:'李白',
	                    studentNum: '1234567',               
	               		date: '', //入学日期
	               		major:'软件工程',
	                    hobbys:[{
	                        hobbyName:'唱歌，曾参加全国歌唱比赛获二等奖',
	                    }],     
	                    status:'0', //状态   0：待入学  1：学习中 2：已毕业
	                    show:true,                          
                },{
                     name:'苏轼',
                    studentNum: '1234567',               
               		date: '2021-09-01', //入学日期
               		major:'软件工程',
                    hobbys:[{
                        hobbyName:'跳舞',
                    }],     
                    status:'1', //状态   0：待入学  1：学习中 2：已毕业
                    show:false, 
                }] 
                }, {
                    education: '研究生',
	                degree:'硕士研究生',
	                schoolNum:'00000001'
	                details: [{ 
	                    name:'杜甫',
	                    studentNum: '1234567',               
	               		date: '', //入学日期
	               		major:'软件工程',
	                    hobbys:[{
	                        hobbyName:'唱歌，曾参加全国歌唱比赛获二等奖',
	                    }],     
	                    status:'0', //状态   0：待入学  1：学习中 2：已毕业
	                    show:true,                          
                }]
             }],
             tagTtems: [
            	 { type: 'danger', label: '待入学',show:false,status:0 },
                { type: 'warning', label: '学习中',show:false,status:1 },
                { type: 'success', label: '已毕业' ,show:false,status:2}   
            ],
        }
    },
    methods:{
        bodyHide(item,index){
            item.show = !item.show
        }
    }
}
</script>
<style scoped lang="scss">
    .el-card{
        /deep/ .el-card__body{
            padding: 0px !important;
        }
    }
</style>