【VUE项目实战】40、添加商品分类功能（一）

接上篇《39、商品分类树形表格渲染和分页》
上一篇我们实现了“排序”和“操作”列的渲染，以及表格的分页效果。本篇我们来实现添加商品分类的功能。

我们最终要实现的效果：

首先点击添加分类按钮，会弹出相应的对话框，然后里面有“分类名称”以及“父级分类”的编辑框，其中“父级分类”为一个“级联选择框”（一个新组件）。

一、实现弹出页面的基本布局

我们在原来的“<el-card>”卡片视图标签的下方，添加Dialog对话框标签，用于展示弹出的添加对话框：

<!-- 添加商品分类的对话框 -->
<el-dialogtitle="添加分类":visible.sync="addCateDialogVisible"width="50%"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="addCateDialogVisible = false">取 消</el-button><el-button type="primary" @click="addCateDialogVisible = false">确 定</el-button></span>
</el-dialog>

其中“addCateDialogVisible”为控制是否显示对话框的对象，我们在数据区定义它：

data(){return {//查询条件queryInfo:{type: 3,pagenum: 1,pagesize: 5},//商品分类的数据列表，默认为空catelist: [],total: 0, //数据总数//为table指定列的定义columns: [],//定义太长了这里省略...//控制是否显示添加分类的对话框addCateDialogVisible: false}
},

然后给添加分类按钮定义一个click事件，其中函数名为“showAddCateDialog”：

<el-button type="primary" @click="showAddCateDialog()">添加分类</el-button>

在方法区中定义该方法：

//点击按钮，展示添加分类的对话框
showAddCateDialog(){this.addCateDialogVisible = true;
}

效果：

然后我们完善对话框的内容：

<!-- 添加商品分类的对话框 -->
<el-dialogtitle="添加分类":visible.sync="addCateDialogVisible"width="50%"><!-- 添加分类表单 --><el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px"><el-form-item label="分类名称" prop="cat_name"><el-input v-model="addCateForm.cat_name"></el-input></el-form-item><el-form-item label="父级分类"></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addCateDialogVisible = false">取 消</el-button><el-button type="primary" @click="addCateDialogVisible = false">确 定</el-button></span>
</el-dialog>

注：这里父级分类我们先不维护“级联选择框”（因为比较复杂，单独拿出来讲）。
这里的el-form是带有校验规则的表单，其中model定义的addCateForm就是要提交的表单对象，rules定义的addCateFormRules就是提交前的校验规则，这些都在数据区进行定义：

//添加分类的表单数据对象
addCateForm: {//将要添加的分类的名称cat_name: '',//父级分类的IDcat_pid: '',//当前分类等级，默认要添加的是1级分类cat_level: 0
},
//添加分类表单的验证规则对象
addCateFormRules: {cat_name: [{ required: true, message: '请选分类名称', trigger: 'blur' }]
}

效果：

二、实现父级分类的级联选择

我们要实现在对话框的父级分类中，来选择一级和二级分类：

这里我们要使用的API依然为商品分类数据列表：

响应数据架构：

{"data": [{"cat_id": 1,"cat_name": "大家电","cat_pid": 0,"cat_level": 0,"cat_deleted": false,"children": [{"cat_id": 3,"cat_name": "电视","cat_pid": 1,"cat_level": 1,"cat_deleted": false,"children": [{"cat_id": 6,"cat_name": "曲面电视","cat_pid": 3,"cat_level": 2,"cat_deleted": false},{"cat_id": 7,"cat_name": "海信","cat_pid": 3,"cat_level": 2,"cat_deleted": false}]}]}],"meta": {"msg": "获取成功","status": 200}
}

请求时，我们要将type设置为2，即只获取一级和二级分类。然后pagenum和pagesize全部都不传递，因为我们要加载所有的。

我们在方法区定义一个名为“getParentCateList”的方法，来获取父级分类下拉框需要的数据：

//获取父级分类的数据列表
async getParentCateList(){const {data: res} = await this.$http.get('categories',{params: {type:2}});if(res.meta.status!==200){return this.$message.error('获取父级分类失败！')}//将数据列表赋值给parentCateListthis.parentCateList = res.data;
}

然后在数据定义区定义parentCateList对象：

//父级分类列表
parentCateList: []

最后在点击对话框触发显示的showAddCateDialog方法中，在显示之前调用获取父级分类的方法：

//点击按钮，展示添加分类的对话框
showAddCateDialog(){//先获取父级分类的列表数据this.getParentCateList();this.addCateDialogVisible = true;},

这些都做完后，我们就在加载之前获取到了父级分类的所有数据，接下来我们就可以那这些数据渲染我们的级联选择组件了。

这里我们需要使用到Element-UI为我们提供的“Cascader级联选择器”中的“hover 触发子菜单”：

示例代码：

<div class="block"><span class="demonstration">hover 触发子菜单</span><el-cascaderv-model="value":options="options":props="{ expandTrigger: 'hover' }"@change="handleChange"></el-cascader>
</div>

其中的v-model是最终选择的好的值绑定的结果对象，这里一定要是一个数组；options绑定的是可选择的子菜单的结构数据源对象，props为配置项，配置显示的值是哪个，id是哪个，展开方式等，具体参数如下：

注：画红圈的是我们主要用到的属性。
@change绑定了当组件值变化时触发的方法。
首先在element.js中引入Cascader组件：

import Vue from 'vue'
import { Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Menu, Submenu, MenuItem, MenuItemGroup,Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,Tooltip,Pagination,Dialog,MessageBox,Tag,Tree,Select,Option,Cascader } from 'element-ui'Vue.use(Button);Vue.use(Form);Vue.use(FormItem);Vue.use(Input);
Vue.use(Container);Vue.use(Header);Vue.use(Aside);Vue.use(Main);
Vue.use(Menu);Vue.use(Submenu);Vue.use(MenuItem);Vue.use(MenuItemGroup);
Vue.use(Breadcrumb);Vue.use(BreadcrumbItem);Vue.use(Card);Vue.use(Row);
Vue.use(Col);Vue.use(Table);Vue.use(TableColumn);Vue.use(Switch);Vue.use(Tooltip);
Vue.use(Pagination);Vue.use(Dialog);Vue.use(Tag);Vue.use(Tree);Vue.use(Select);
Vue.use(Option);Vue.use(Cascader);
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

我们在原来的“父级分类”的“el-form-item”标签中放置级联选择器，然后定义相关的参数：

<!-- 添加商品分类的对话框 -->
<el-dialogtitle="添加分类":visible.sync="addCateDialogVisible"width="50%"><!-- 添加分类表单 --><el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px"><el-form-item label="分类名称" prop="cat_name"><el-input v-model="addCateForm.cat_name"></el-input></el-form-item><el-form-item label="父级分类"><el-cascaderv-model="selectedKeys":options="parentCateList":props="cascaderProps"@change="parentCateChanged()"></el-cascader></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addCateDialogVisible = false">取 消</el-button><el-button type="primary" @click="addCateDialogVisible = false">确 定</el-button></span>
</el-dialog>

这里的“selectedKeys”、“cascaderProps”需要在数据区定义好：

//指定级联选择器的配置对象
cascaderProps: {value: 'cat_id',label: 'cat_name',children: 'children',leaf: 'cat_level',expandTrigger: 'hover' //悬浮显示
},
//选中的父级分类的ID
selectedKeys :[]

然后在方法区定义选择分类变化时的函数parentCateChanged：

//选择项发生变化触发这个函数
parentCateChanged(){console.log(this.selectedKeys);
}

这里先打印出选择的内容。
这里还需要调一下级联选择器的最大高度，不然在加载很多数据的时候会占满整个屏幕，所以需要在vue_shop/src/assets/css/global.css下定义全局样式：

.el-cascader-panel{max-height: 200px;
}

测试效果：

选择“大家电/电视”后，控制台打印选择数据：

至此，级联选择器加载的效果已经实现了，下一篇我们继续完善级联选择器的选择等操作。

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

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