vue+element实现sku表格

Vue Element是一个基于Vue.js框架构建的UI组件库，提供了丰富的组件，方便开发者构建各种交互界面。要实现SKU表格，可以借助Vue Element的Table组件和选择器组件。

首先，需要准备好SKU的数据结构，包括SKU的属性以及对应的值。可以使用一个嵌套的数组来表示，例如：

[
  { name: '颜色', values: ['红色', '蓝色', '绿色'] },
  { name: '尺码', values: ['S', 'M', 'L'] }
]

接下来，在Vue组件中使用Table组件来展示SKU表格。可以使用v-for指令循环遍历SKU的属性和值，生成表头和表格数据。同时，可以给每个单元格添加选择器组件来选择对应的属性值。

示例代码如下：

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="attr in attributes"
      :key="attr.name"
      :label="attr.name"
    >
      <template slot-scope="scope">
        <el-select v-model="scope.row[attr.name]" placeholder="请选择">
          <el-option v-for="value in attr.values" :key="value" :label="value" :value="value"></el-option>
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      attributes: [
        { name: '颜色', values: ['红色', '蓝色', '绿色'] },
        { name: '尺码', values: ['S', 'M', 'L'] }
      ],
      tableData: []
    };
  },
  created() {
    // 生成SKU表格数据
    const skuData = this.generateSkuData(this.attributes);
    this.tableData = skuData;
  },
  methods: {
    generateSkuData(attributes) {
      // 根据属性生成表格数据
      const skuData = [];

      const rowLength = attributes.reduce((acc, curr) => acc * curr.values.length, 1);

      for (let i = 0; i < rowLength; i++) {
        const rowData = {};

        let remain = i;

        attributes.forEach(attr => {
          const valueIndex = remain % attr.values.length;
          rowData[attr.name] = attr.values[valueIndex];
          remain = Math.floor(remain / attr.values.length);
        });

        skuData.push(rowData);
      }

      return skuData;
    }
  }
};
</script>

通过上述代码，可以实现一个基于Vue Element的SKU表格。每个单元格都可以通过选择器组件选择对应的属性值，从而构建SKU表格。当选择器的值发生改变时，可以通过监听事件获取到最新的SKU数据。这样，就可以根据选择器的值进行相应的业务操作。