vue电商后台开发商品自定义规格（vue+Ant Design Vue）

实现的效果

样式的话跳过，直接总结下技术步骤

一、添加不同的父规格与子规格

这一步很简单，主要是组成一个二维数组 spec_arr，类似

[    [       {           goodspec:'颜色'，           item:'红色'        }，        {                       goodspec:'颜色'，           item:'白色'        }        ]，
    [               {           goodspec:'大小'，           item:'大号'        }，        {                     goodspec:'大小'，           item:'中号'        }，         {                                 goodspec:'大小'，            item:'小号'                }        ]
]

或

[    {       goodspec:'颜色'，        items:[            {item:'红色'}，            {item:'白色'}        ]       
    },
    {       goodspec:'大小'，
        items:[
            {item:'大号'}，
            {item:'中号'}，
            {item:'小号'}
        ]       
    }
]

主要就是上面两种结构，具体的话看自己的项目情况，我用的是是第一个方式

二、根据上面的数组 spec_arr生成表格

这里的表格用的是antdv里的table,table表格需要接收两个数组 结构如下：

表头：

const columns = [  {    title: 'Name',    dataIndex: 'name',    key: 'name'  },  {    title: 'Age',    dataIndex: 'age',    key: 'age'  }, {    title: 'Age',    dataIndex: 'age',    key: 'age'  },  {    title: 'Address',    dataIndex: 'address',    key: 'address',  }]

表格数据：

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park'
  },
];

这一步相对复杂点，分成几个步骤

1.拼装以 spec_arr数组 +基础操作（类似：现价、原价、库存、重量所需要填写的操作）生成的表格表头

思路：

创建一个新数组，遍历spec_arr数组，把所有的父规格标题push进来

 let columns = [], column, spec_name;   
 this.spec_arr.forEach((val, idx) => {                            
       val.forEach(item => {          
            spec_name = item.spec_name; 
       })        
        column = {                
               title: spec_name,                
               dataIndex: spec_name,  
               align: 'center', 
               width: '10%'       
        }    
        columns.push(column)   
    }}
);

创建一个base_columns

const base_columns = 
    [{            
        title: '现价',
        dataIndex: 'current_price',
        align: 'center',
        width: '10%',
        scopedSlots: {               
                 customRender: 'current_price'  
         },        
      },        
      {            
          title: '原价',            
          dataIndex: 'original_price', 
          align: 'center',
          width: '10%',           
          scopedSlots: {                
               customRender: 'original_price'            
           },       
     },        
    {           
          title: '库存',  
          dataIndex: 'stock',
          align: 'center',  
          width: '10%',  
          scopedSlots: {              
                  customRender: 'stock'           
           },        
    },        
    {           
           title: '重量', 
           dataIndex: 'weight',     
           align: 'center',       
           width: '10%',    
           scopedSlots: {                
            customRender: 'weight'        
            },        
    },    
]

合并两个数组

this.goods_specs_columns = [...columns, ...base_columns];

2.把spec_arr二维数组进行递归遍历，得到所有存在的规格

 // 刷新规格表 refesh_specsList() {
     //刷新生成数据前先初始化     
     this.goods_specs_data = [];
     this.goods_specs_data = this.set_specData(this.combine(...this.goodsSpecList)); 
},
 // 递归遍历后得到所有的数据
 combine(...chunks) {     
      let res = [];
      let helper = (chunkIndex, prev) => {         
        let chunk = chunks[chunkIndex];          
        let isLast = chunkIndex === chunks.length - 1;          
        for (let val of chunk) {              
             let value = `${val['spec_name']}_${val['item']}`              
             let cur = prev.concat(value);             
             if (isLast) {               
              // 如果已经处理到数组的最后一项了 则把拼接的结果放入返回值中                
              res.push(cur)               
             } else {                 
               helper(chunkIndex + 1, cur)               
             }           
       }    
     }      
     // 从属性数组下标为 0 开始处理     
     // 并且此时的 prev 是个空数组      
    helper(0, [])     
 return res  },

 set_specData(goodsSpecData) {      
      let SpecData = [];      
      // 组合表格内数据      
     goodsSpecData.map((item) => {         
        let obj = {};         
        for (let s in item) {              
            let is_val = item[s].split('_');              
            obj[is_val[0]] = is_val[1];         
         }         
        ['current_price', 'original_price', 'stock', 'weight'].forEach((val) => {              
            obj[val] = 0          
        });           
        SpecData.push(obj)        
     })        
    return SpecData;    
}

到此就能渲染成表格的数据了