vue实现带规格商品的表格编辑

可以通过以下步骤实现带规格商品的表格编辑：

1. 创建一个包含商品规格的数据结构，例如：

{
  name: '商品A',
  specs: [
    { specName: '颜色', specValues: ['红色', '蓝色'] },
    { specName: '尺寸', specValues: ['S', 'M', 'L'] }
  ],
  skus: [
    { specValues: ['红色', 'S'], price: 10, stock: 100 },
    { specValues: ['红色', 'M'], price: 15, stock: 50 },
    { specValues: ['红色', 'L'], price: 20, stock: 20 },
    { specValues: ['蓝色', 'S'], price: 12, stock: 80 },
    { specValues: ['蓝色', 'M'], price: 18, stock: 30 },
    { specValues: ['蓝色', 'L'], price: 25, stock: 10 },
  ]
}

2. 在Vue组件中渲染表格，表头为规格名称，表格内容为规格值对应的价格和库存，例如：

<table>
  <thead>
    <tr>
      <th v-for="spec in specs">{{ spec.specName }}</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="sku in skus">
      <td v-for="(value, index) in sku.specValues">{{ specs[index].specValues[value] }}</td>
      <td><input type="number" v-model="sku.price"></td>
      <td><input type="number" v-model="sku.stock"></td>
    </tr>
  </tbody>
</table>

3. 使用Vue的计算属性，根据已选择的规格值计算出对应的SKU，例如：

computed: {
  selectedSpecValues() {
    return this.specs.map(spec => spec.selectedValue)
  },
  selectedSku() {
    return this.skus.find(sku => {
      return JSON.stringify(sku.specValues) === JSON.stringify(this.selectedSpecValues)
    })
  }
}

4. 在Vue组件的规格选项中，使用Vue的v-for指令渲染所有规格值，并通过v-bind指令绑定每个规格值的点击事件和样式，例如：

<div v-for="(value, index) in spec.specValues"
     v-bind:class="{ selected: spec.selectedValue === index }"
     v-on:click="selectSpecValue(spec, index)">
  {{ value }}
</div>

5. 实现Vue组件的selectSpecValue方法，用于选择规格值，并更新计算属性中的已选择规格值和对应的SKU，例如：

methods: {
  selectSpecValue(spec, index) {
    spec.selectedValue = index
  }
}

以上是实现带规格商品的表格编辑的基本步骤，根据具体需求可以做出适当的调整。