el-sku is a vue component which can bring you a useful and editable table containing SKU and other extra custom fields simply by specification attributes coupled with related values array and some config.

在线示例及 API 文档

• Features
• Install
• Links
• License

• easy-to-use,simply by a array containing specification attributes coupled with related values.

  [
    {
      "id": 1,
      "prop": "color",
      "label": "颜色",
      "values": [
        {
          "id": 11,
          "text": "黑色"
        },
        {
          "id": 12,
          "text": "白色"
        }
      ]
    },
    {
      "id": 2,
      "prop": "size",
      "label": "尺寸",
      "values": [
        {
          "id": 21,
          "text": "6.4"
        },
        {
          "id": 22,
          "text": "5.8"
        }
      ]
    }
  ]

• custom and editable table, not just generate SKUS and show them, el-sku has the ability to bring you whatever extra field you wanna collect.

  

  const customColumns = [
    {
      prop: 'status',
      label: '有效',
      width: 100,
      default: true
    },
    {
      prop: 'album',
      label: '图册',
      width: 150,
      default: ['1.jpg', '2.png']
    },
    {
      prop: 'marketPrice',
      label: '市场价',
      width: 200,
      default: 0
    }
  ]

• custom assistance operation, editing SKU might be taxing, so el-sku has some built-in overwritable assistance operations and you can add more simply by a prop.

  

const customAssistance = [
  {
    name: 'autofillStock',
    label: '自动填充库存',
    prop: 'stock',
    cb: function(tableData, editableRow, event) {
      return tableData.map(_ => {
        if (_.color === '黑色') return 5
      })
    }
  }
]

• v-model is fulfilled, you can use v-model to sync tabledata real-time.

• There will be more following features...

  • built-in submittal using Axios.
  • custom field verifications.
  • custom side operation column.

⬆ Back to Top

npm i @leezeehowe/el-sku

⬆ Back to Top

• api documents
• online sample

MIT

⬆ Back to Top