@leezeehowe/el-sku NPM

el-sku

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.

basic function

在线示例及 API 文档

Features
Install
Links
License

Features

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.

npm.io

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