vue-sku-form 一款电商 SKU 表单配置组件

Hooray

先来一张图快速了解下组件形态

快速上手

因为 vue-sku-form 基于 ElementUI 开发,安装使用前确保项目中已正确安装 ElementUI
# 推荐使用 yarn 进行安装
yarn add vue-sku-form
# 或者使用 npm 也无伤大雅
npm install vue-sku-form

安装完成后,可以选择全局引入或者局部引入。全局引入需要在 main.js 中增加以下内容:

import SkuForm from 'vue-sku-form'
Vue.use(SkuForm)

然后在页面中就可以使用 <SkuForm /> 组件了。

局部引入则在页面中手动引入:

<template>
    <SkuForm />
</template>

<script>
import SkuForm from 'vue-sku-form'

export default {
    components: {
        SkuForm
    }
}
</script>

案例

自定义表格

电商后台对sku的配置比较常见的场景就是,根据不同业务需求,配置的项目也会不同,例如除了常见的价格和库存,可能还会有商品编码、原价、现价、进货价等等。所以参考这个需求,vue-sku-form对表单实现了自定义配置。

展示列

在自定义表格的基础上,考虑到一个完整的sku数据可能不是由一个人完成,可能需要经历好几个环节,不同部门的人一起完善后才完成最终的数据,例如:采购部填写采购价和库存,商品部填写销售价,财务部填写原价。所以参考这个需求,vue-sku-form对表单实现了展示列的功能,可将指定列仅做展示。

计算列

这个功能就很明显了,计算列的结果不记录到sku最终数据里,仅通过自定义的计算规则,用于展示在表格内。

验证

既然是表单,一定少不了验证,vue-sku-form提供了必填验证,同时也支持自定义验证规则,以及异步验证。

其它

除了以上几个场景案例外,还有一些其它基本的功能,例如批量设置、主题设置、图片上传,就不一一介绍了。如果有这方面需要,可以到 vue-sku-form 查看完整功能介绍。

阅读 3.9k
5 声望
2 粉丝
0 条评论
5 声望
2 粉丝
文章目录
宣传栏