先来一张图疾速理解下组件状态

疾速上手

因为 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 查看残缺性能介绍。