D③商品列表-添加商品：路由跳转， steps步骤条，steps步骤条 与 tab栏区域 的绑定；tab栏每栏区域；表单输入类型是数字；表单名称在输入框上方;checkbox 带边框；upload上传组件

ui

路由跳转

函数：
当你点击<router-link>时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。
声明式：<router-link :to="...">
编程式：router.push(...)
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

创建add.vue，router.js中注册即可

steps步骤条

css:

tab栏区域

steps步骤条 与 tab栏区域 的绑定

tab栏区域v-model绑定的的值取自每项的name，所以name命名为steps的取值范围就好了。这样steps与tab的监听变化，都使用一个变量，都有相同的变量取值范围。
字符串转化为数字，减0

tab栏每栏区域

tab栏每栏区域的总和才是商品的完整信息，用表单包围tab栏才是

表单名称在输入框上方

tab基本信息ui-级联选择器-表单校验

商品价格只能是数字，表单输入类型是数字

级联选择器-选择商品分类，也需要校验，也需要提交（所以放在addForm里面）

选择分类后，才能tab页面切换

↓这两个参数，可以直接console.log;这个函数return false就不能切换tabs啦

return false条件：是第一页tab，并且商品类别没选中（len≠3）

tab商品参数ui（动态参数）

这边获取参数的id是--上个tab选中的分类的id呢
触发条件：


（它能输出被点击tab面板的序号↓）

渲染参数：
checkbox


当然：key=i也是非常可以的，有id就用id喽~

美化checkbox：

tab商品属性ui（静态参数）

和上面静态一样，只不过不用把attr_vals切割，直接用el-input渲染就行

tab商品图片

单击按钮，选择图片的一个框，自动上传到后台的api，点击图片名就能弹出“图片预览”的对话框，右上角的叉号就能将图片从右上角移除
upload上传组件