gaoluyang
2026-06-24 712aa51536236d43e87273e4ce45ac5691dffad8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script lang="ts" setup>
import { ref } from 'vue';
 
import { DocAlert, Page } from '..\..\..\..\packages\effects\common-ui\src';
 
import PropertyGrid from './modules/property-grid.vue';
import ValueGrid from './modules/value-grid.vue';
 
const searchPropertyId = ref<number>(); // 搜索的属性 ID
 
function handlePropertyIdSelect(propertyId: number) {
  searchPropertyId.value = propertyId;
}
</script>
 
<template>
  <Page auto-content-height>
    <template #doc>
      <DocAlert
        title="【商品】商品属性"
        url="https://doc.iocoder.cn/mall/product-property/"
      />
    </template>
    <div class="flex h-full">
      <!-- 左侧属性列表 -->
      <div class="w-1/2 pr-3">
        <PropertyGrid @select="handlePropertyIdSelect" />
      </div>
      <!-- 右侧属性数据列表 -->
      <div class="w-1/2">
        <ValueGrid :property-id="searchPropertyId" />
      </div>
    </div>
  </Page>
</template>