简单表格样式
<template>
<div class="formTitle">
<div class="FormTableIndexBoxTitle" @click="tagShwo">
<span class="el-icon-arrow-down routeIcon" :class="isShwo ? '' : 'isIcon'" style="margin-right: 10px;"></span>
<span>{{title}}</span>
</div>
<div class="formTitleMain" v-show="isShwo">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
default: '标题'
},
isOpen: {
default: true
}
},
data(){
return {
isShwo: true
}
},
methods: {
tagShwo(){
this.isShwo = !this.isShwo
}
},
watch: {
isOpen: {
handler(news){
this.isShwo = news
},
immediate: true
}
}
}
</script>
<style scoped>
.formTitle{
width: 100%;
height: auto;
border: 1px solid #ECECEC;
}
.FormTableIndexBoxTitle{
width: 100%;
height: 56px;
background: #F9F9F9;
font-size: 20px;
color: #333333;
line-height: 56px;
padding-left: 17px;
box-sizing: border-box;
cursor: pointer;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
.routeIcon{
transition: all 0.2s;
}
.isIcon{
transform: rotate(-90deg);
}
.formTitleMain{
width: 100%;
height: auto;
padding: 20px 0 10px;
box-sizing: border-box;
transition: all 0.5s;
}
</style>