46 lines
1020 B
Vue
46 lines
1020 B
Vue
<template>
|
|
<div class="spec-collapse">
|
|
<el-collapse v-model="activeName">
|
|
<el-collapse-item
|
|
v-for="item in data"
|
|
:key="item.name"
|
|
:title="item.name"
|
|
:name="item.name"
|
|
>
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item
|
|
v-for="subItem in item.specs"
|
|
:key="subItem.key"
|
|
:label="subItem.value"
|
|
>
|
|
{{ subItem.value }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object as () => ProductSpecGroupView[],
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
// 默认全部展开
|
|
const activeName = ref<string[]>(
|
|
props.data.map((item: ProductSpecGroupView) => {
|
|
return item.name;
|
|
}) || []
|
|
);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.spec-collapse ::v-deep(.el-collapse-item__header) {
|
|
font-size: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
</style>
|