【VUE项目实战】52、商品添加功能（二）-基本信息

接上篇《51、商品添加功能（一）》
上一篇我们完成了添加商品的基本页面结构绘制，本篇我们来完成多页签汇总信息添加商品的逻辑。

一、分析添加行为并设置表单

我们来分析一下页面上的添加行为，我们将一个商品的信息维护在了五个Tab面板中，每个Tab面板只维护了当前商品的部分数据，只有将这五个面板的数据合起来，才是一个完整的商品信息数据，所以我们应该在这五个Tab页签的外面，用一个统一的Form表单进行包裹：

在Element-UI中，我们选择带有“表单验证”的Form表单组件(https://element.eleme.cn/#/zh-CN/component/form)：

我们将官方的代码中的el-form头拷贝下来，放在我们的五个Tab页签的外面并修改一下(一定是在el-form之内嵌套el-tabs，不能在el-tabs和el-tab-pane之间放el-form，因为el-tabs只认el-tab-pane为它的第一子节点，这里要注意)：

    
        基本信息
        商品参数
        商品属性
        商品图片
        商品内容
    

注：其中“label-position="top"”是定义属性值在输入框的上方而不是默认的左侧。
然后在数据区定义其中的表单对象和表单校验规则对象：

二、绘制基本信息页面

下面我们来绘制基本信息页面，需要达到的效果如下：

我们在第一个el-tab-pane中编写商品基本信息输入框：

    
        
             
                
            
             
                
            
             
                
            
             
                
            
        
        商品参数
        商品属性
        商品图片
        商品内容
    

注：这里将原来el-tabs上的高度200px删除了，让它根据内容自动确定高度。el-input中还设置了type，像价格数量这些只能让用户输入数字（number）类型。
然后在数据区加入表单校验规则：

效果：

可以看到页面绘制和校验规则都生效了。

然后我们再来添加最后的商品分类字段，这里需要我们现获取所有的商品分类，然后使用Cascader级联选择器组件显示出来。
首先我们在方法区先定义获取商品分类的方法，以及在数据区定义商品分类的数组对象：

然后在商品基本信息表单最下面加载商品分类作为下拉列表（使用Cascader级联选择器）：

其中catelist是从getCateList方法中取出的分类数组数据，然后cascaderProps是级联选择器对应的配置对象，handleChange是选择完后触发的函数，分别定义在数据区以及方法区（同时在表单校验规则中也指定一下goods_cat的规则）：

这里在handleChange只控制选择3级的商品分类。
效果：

至此我们的商品多页签汇总信息添加商品的基本功能就完成了。
下一篇我们来完成商品参数面板的开发。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/acmman/article/details/125030560