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

快速上手

因为 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 查看完整功能介绍。