Vue3商品SKU多规格编辑组件

### Vue3 商品 SKU 多规格编辑组件实现 在 Vue 3 中实现商品 SKU 的多规格编辑组件是一项常见的需求，尤其是在电商平台开发中。以下是一个完整的解决方案，涵盖了组件的设计思路、核心逻辑以及示例代码。 --- #### 设计思路 1. **数据结构设计** 商品的规格通常由多个维度组成（如颜色、尺寸），每个维度有若干选项值。SKU 数据可以表示为一个多维数组或对象树的形式。例如： ```json { "color": ["red", "blue"], "size": ["S", "M", "L"] } ``` 2. **动态生成表格** 基于规格名称和对应的选项值，动态生成一个二维表格，用于展示所有的可能组合及其对应的价格、库存等信息。 3. **状态管理** 使用 Vue 3 的响应式系统 (`ref` 或 `reactive`) 来管理当前选中的规格、价格及库存状态。 4. **校验与更新** 当用户更改某个规格的状态时，需实时校验是否存在冲突（如重复 SKU 或缺货情况）。同时允许批量编辑功能以提高效率。 --- #### 核心代码实现 以下是基于 Vue 3 Composition API 的完整示例代码： ```vue <template> <div class="sku-editor"> <!-- 规格选择 --> <div v-for="(spec, key) in specs" :key="key" class="spec-group"> {{ key }}: <el-radio-group v-model="selectedSpecs[key]" @change="handleSpecChange(key)"> <el-radio-button v-for="value in spec" :key="value" :label="value">{{ value }}</el-radio-button> </el-radio-group> </div> <!-- 动态生成的 SKU 表格 --> <table border="1" cellpadding="10" cellspacing="0" width="100%"> <thead> <tr> <th v-for="(header, idx) in tableHeaders" :key="idx">{{ header }}</th> </tr> </thead> <tbody> <tr v-for="(row, rowIndex) in skuTable" :key="`${rowIndex}-${JSON.stringify(row)}`"> <td v-for="(cellValue, cellKey) in row" :key="cellKey"> <input v-if="['price', 'stock'].includes(cellKey)" type="number" v-model="row[cellKey]" placeholder="请输入数值" /> <span v-else>{{ cellValue }}</span> </td> </tr> </tbody> </table> </div> </template> <script setup> import { reactive, computed } from "vue"; const props = defineProps({ initialSpecs: { type: Object, required: true, }, }); // 初始化规格数据 const selectedSpecs = reactive({}); props.initialSpecs.forEach((values, key) => { selectedSpecs[key] = values[0]; }); // 计算表头 const tableHeaders = computed(() => [...Object.keys(props.initialSpecs), "price", "stock"].map((item) => item.charAt(0).toUpperCase() + item.slice(1)) ); // 动态生成 SKU 表格 const generateCombinations = () => { const keys = Object.keys(props.initialSpecs); const values = Object.values(props.initialSpecs); function cartesianProduct(...a) { return a.reduce( (acc, b) => acc.flatMap(d => b.map(e => [].concat(d, e))), [[]] ); } return cartesianProduct(...values).map(combination => { const obj = {}; combination.forEach((val, i) => (obj[keys[i]] = val)); obj["price"] = ""; obj["stock"] = ""; return obj; }); }; const skuTable = reactive(generateCombinations()); // 更新已选规格并触发重新计算 function handleSpecChange(updatedKey) { console.log(`Updated ${updatedKey} to`, selectedSpecs[updatedKey]); } </script> <style scoped> .sku-editor .spec-group { margin-bottom: 1em; } .sku-editor table th, .sku-editor table td { text-align: center; } </style> ``` --- #### 关键点解析 1. **规格选择器** 使用 `v-for` 循环遍历所有规格，并通过 `el-radio-group` 提供直观的选择界面[^2]。 2. **动态生成 SKU 表格** 利用笛卡尔积算法生成所有可能的规格组合，并将其映射到表格行中。每行列出具体的规格值以及可编辑的价格和库存字段[^4]。 3. **双向绑定与输入框** 对于价格和库存列，提供了 `<input>` 输入框以便用户直接修改数据。这些改动会自动反映到内部状态中。 4. **事件处理** 每次改变规格选择时都会调用 `handleSpecChange` 函数，可以根据业务需求扩展更多逻辑，比如过滤不可用的 SKU 组合[^3]。 --- ####