1.因为业务需要,使用element组件把el-collapse中的accordion变化的箭头放左边并且el-table自适应列高
<el-card shadow="always" style="height:400px; overflow:auto">
//当数据量太大时重新添加了样式style="height:400px; overflow:auto"
<div v-for="o in tableDateList" :key="o.id">
<el-collapse v-model="activeNames" @change="handleChange(o)" accordion>
<el-collapse-item>
<template slot="title">
<span class="collapse-title" v-html="o.html"></span>
//在span 中设置class="collapse-title"
</template>
<div>
<el-table
max-height="150"//最大高度,不能设置成height,height是用来固定高度的
:data="o.list"
style="width: 100%">
</el-table>
</div>
</el-collapse-item>
</el-collapse>
</div>
</el-card>
<script>
export default {
data() {
return {
activeNames: [],
//activeNames: '1',
}
},
methods: {
handleChange(data) {
if (data.collection.length === 0) {
let list = [];
list.push("1");
data.collection = list;
} else {
data.collection = [];
}
},
}
<style scoped lang="scss">
.collapse-title {
flex: 1 0 90%; //使箭头位于左侧
order: 1;
}
</style>