34 lines
983 B
Vue
34 lines
983 B
Vue
<template>
|
|
<div class="spec-collapse">
|
|
<el-collapse v-model="activeName">
|
|
<el-collapse-item v-for="item in data" :key="item.title" :title="item.title" :name="item.title">
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item v-for="subItem in item.items" :key="subItem.label" :label="subItem.label">
|
|
{{ 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 () => ProductionSpecGroup[],
|
|
required: true
|
|
}
|
|
})
|
|
|
|
// 默认全部展开
|
|
const activeName = ref<string[]>(props.data.map((item: ProductionSpecGroup) => {
|
|
return item.title
|
|
}) || [])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.spec-collapse ::v-deep(.el-collapse-item__header) {
|
|
font-size: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
</style> |