<template>
<div>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item v-for="(item, index) in list" :key="index" :name="index">
<template #title>
<span class="collapse-title flex" slot="title"
>{{ item.name }}
<div class="collapse-title-right flex">
<span @click.stop="toEdit">编辑</span>
</div>
</span>
</template>
<template #right-icon>
<el-icon><ele-CaretBottom /></el-icon>
</template>
<div>{{ item.content }}</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script setup>
const list = [
{
name: '名称1',
id: 12,
content: '1Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.',
},
{
name: '名称2',
id: 23,
content: '2Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.',
},
];
const activeNames = ref([0, 1]);
const handleChange = (val) => {
console.log(val);
};
const toEdit = () => {
console.log(111);
};
</script>
<style lang="scss">
.el-collapse-item__arrow {
margin-right: 5px;
font-size: 8px;
color: #0164fe;
&:before {
// 要替换的icon
content: '\e620';
font-family: 'iconfont';
font-size: 8px;
font-style: normal;
color: #0164fe;
margin-right: 10px;
}
}
.el-collapse-item__arrow.is-active {
transform: rotate(90deg);
margin-top: 14px;
margin-left: -6px;
margin-right: 10px;
}
.collapse-title {
height: 44px !important;
line-height: 44px;
flex: 1 0 90%;
order: 1;
justify-content: space-between;
}
.el-collapse-item__header {
height: 44px !important;
flex: 1 0 auto;
order: -1;
background: #e7efff;
padding: 0 20px;
border-bottom: 1px solid #ffffff;
}
.collapse-title-right {
span {
color: #0e64f1;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
.el-collapse-item__content {
padding: 20px;
}
.el-collapse-item__wrap {
border: none;
}
</style>
