创建新分支 a. 创建good_cate
子分支git checkout -b good_cate
b. 创建远程子分支git push -u
创建Cate组件并添加路由 添加面包屑导航区
< el-breadcrumb separator = " /" >
< el-breadcrumb-item :to = " { path: ' /home' }" > 首页</ el-breadcrumb-item>
< el-breadcrumb-item> 商品管理</ el-breadcrumb-item>
< el-breadcrumb-item> 商品分类</ el-breadcrumb-item>
</ el-breadcrumb>
添加卡片视图
< el-card>
< el-button type = " primary" > 添加分类</ el-button>
</ el-card>
获取商品分类的数据列表 a. data中添加查询参数queryInfo
,商品分类的数据列表商品分类的数据列表
,总数据条数total
b. methods
中添加getCateList()
方法获取商品分类数据 c. created()
函数中调用this.getCateList()
方法
queryInfo: {
type: 3 ,
pagenum: 1 ,
pagesize: 5
} ,
cateList: [ ] ,
total: 0
}
async getCateList ( ) {
const { data: res} = await this . $http. get ( 'categories' , { params: this . queryInfo} )
console. log ( res. data)
if ( res. meta. status !== 200 ) {
return this . $message. error ( '获取商品分类列表失败' )
}
this . cateList = res. data. result
this . total = res. data. total
}
添加树形控件 a. 通过vue ui
打开vue可视化面板 b. 点击安装依赖,查找vue-table-with-tree-grid控件,点击安装 c. 在main.js中添加import TreeTable from 'vue-table-with-tree-grid'
导入控件,并通过Vue.component('tree-table',TreeTable)
挂载全局 d. Cate组件中添加tree-table控件:去除复选框:selection-type="false"
,去除展开按钮 :expand-type="false"
,展示索引列show-index
,添加索引列表头show-index
,添加边框,去除鼠标hover效果:show-row-hover="false"
e. 使用自定义模板列渲染是否有效,排序和操作列
< tree-table
:data = " cateList" :columns = " columns"
:selection-type = " false" :expand-type = " false"
show-index index-text = " #"
border :show-row-hover = " false" >
< template slot = " isok" slot-scope = " scope" >
< i class = " el-icon-success" v-if = " scope.row.cat_deleted === true" style =" color : lightgreen" > </ i>
< i class = " el-icon-error" v-if = " scope.row.cat_deleted === false" style =" color : red" > </ i>
</ template>
< template slot = " order" slot-scope = " scope" >
< el-tag size = " mini" v-if = " scope.row.cat_level===0" > 一级</ el-tag>
< el-tag size = " mini" type = " success" v-else-if = " scope.row.cat_level===1" > 二级</ el-tag>
< el-tag size = " mini" type = " warning" v-else > 三级</ el-tag>
</ template>
< template slot = " opt" >
< el-button type = " primary" size = " mini" icon = " el-icon-edit" > 编辑</ el-button>
< el-button type = " danger" size = " mini" icon = " el-icon-delete" > 删除</ el-button>
</ template>
</ tree-table>
columns: [
{ label: '分类名称' , prop: 'cat_name' } ,
{ label: '是否有效' , type: 'template' , template: 'isok' } ,
{ label: '排序' , type: 'template' , template: 'order' } ,
{ label: '操作' , type: 'template' , template: 'opt' }
]
实现分页的功能 添加el-pagination
控件,绑定size改变事件handleSizeChange
,页面切换事件handleCurrentChange
,当前页面queryInfo.pagenum
,当前分页大小queryInfo.pagesiz
,总页数total
< el-pagination
@size-change = " handleSizeChange"
@current-change = " handleCurrentChange"
:current-page = " queryInfo.pagenum"
:page-sizes = " [3, 5, 10, 15]"
:page-size = " queryInfo.pagesize"
layout = " total, sizes, prev, pager, next, jumper"
:total = " total" >
</ el-pagination>
handleSizeChange ( newSize) {
this . queryInfo. pagesize = newSize
this . getCateList ( )
} ,
handleCurrentChange ( newPage) {
this . queryInfo. pagenum = newPage
this . getCateList ( )
}
实现添加分类的功能 a. 添加添加分类对话框,设置控制对话框显示与关闭的变量:visible.sync="addCateDialogVisible"
b. 添加Cascader
组件:value / v-model
选中项绑定值,options
可选项数据源,键名可通过 Props 属性配置,props
配置选项,具体见下表,clearable 是否支持清空选项,filterable
是否可搜索选项,change 当选中节点变化时触发 c. 实现parentCateChanged
,当第二个选项为空时,增加发的是父级分类,否则增加的是子集分类,为该分类添加父节点的id和level值。
< el-dialog title = " 添加分类" width = " 30%" :visible.sync = " addCateDialogVisible"
@close = " addCateDialogClosed" >
< el-form :model = " addCateForm" ref = " addCateFormRef" :rules = " addCateFormRules" 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-cascader
v-model = " selectedKeys"
:options = " parentCateList"
:props = " cascaderProps"
@change = " parentCateChanged"
clearable
filterable
style =" width : 100%"
> </ 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 = " addCate" > 确定</ el-button>
</ span>
</ el-dialog>
cascaderProps: {
expandTrigger: 'hover' ,
value: 'cat_id' ,
label: 'cat_name' ,
children: 'children'
} ,
addCateFormRules: {
cat_name: [
{ required: true , message: '请输入分类名称' , trigger: 'blur' }
]
} ,
parentCateChanged ( ) {
if ( this . selectedKeys. length > 0 ) {
this . addCateForm. cat_pid = this . selectedKeys[ this . selectedKeys. length - 1 ]
this . addCateForm. cat_level = this . selectedKeys. length
return 0
} else {
this . addCateForm. cat_pid = 0
this . addCateForm. cat_level = 0
}
} ,
addCate ( ) {
this . $refs. addCateFormRef. validate ( async valid => {
if ( ! valid) return
const { data: res} = await this . $http. post ( 'categories' , this . addCateForm)
if ( res. meta. status !== 201 ) {
return this . $message. error ( '添加分类失败!' )
}
this . $message. success ( '添加分类成功!' )
this . getCateList ( )
this . addCateDialogVisible = false
} )
} ,
addCateDialogClosed ( ) {
this . $refs. addCateFormRef. resetFields ( )
this . selectedKeys = [ ]
this . addCateForm. cat_level = 0
this . addCateForm. cat_pid = 0
} ,
实现编辑分类的功能
< el-dialog title = " 编辑分类" :visible.sync = " editCateDialogVisible" width = " 50%" >
< el-form
:model = " editCateForm"
:rules = " editCateFormRules"
ref = " editCateFormRef"
label-width = " 100px" >
< el-form-item label = " 分类名称:" prop = " cat_name" >
< el-input v-model = " editCateForm.cat_name" > </ el-input>
</ el-form-item>
</ el-form>
< span slot = " footer" class = " dialog-footer" >
< el-button @click = " editCateDialogVisible = false" > 取 消</ el-button>
< el-button type = " primary" @click = " editCate" > 确 定</ el-button>
</ span>
</ el-dialog>
editCateDialogVisible: false ,
editCateFormRules: {
cat_name: [
{ required: true , message: '请输入分类名称' , trigger: 'blur' }
]
} ,
editCate ( ) {
this . $refs. editCateFormRef. validate ( async valid => {
if ( ! valid) return
const { data: res} = await this . $http. put ( 'categories/' + this . editCateForm. cat_id, {
cat_name: this . editCateForm. cat_name
} )
if ( res. meta. status !== 200 ) return this . $message. error ( '更新分类名失败!' )
this . $message. success ( '更新分类名成功!' )
this . getCateList ( )
this . editCateDialogVisible = false
} )
} ,
实现删除分类的功能
async removeCate ( id) {
const confirmResult = await this . $confirm ( '此操作将永久删除该分类, 是否继续?' , '提示' , {
confirmButtonText: '确定' ,
cancelButtonText: '取消' ,
type: 'warning'
} ) . catch ( err => err)
if ( confirmResult !== 'confirm' ) { return this . $message. info ( '已取消删除!' ) }
const { data: res } = await this . $http. delete ( 'categories/' + id)
if ( res. meta. status !== 200 ) { return this . $message. error ( '删除商品分类失败!' ) }
this . $message. success ( '删除商品分类成功!' )
this . getCateList ( )
}
保存道本地仓库并提交远程仓库 a. 添加到本地仓库 git add .
b. 提交修改 git commit -m "完成了分类功能的开 发"
c. 新建远程分支并推送代码到该分支 git push -u origin good_cate
d. 切换到主分支 git checkout master
e. 将good_cate分支合并到主分支 git merge good_cate
f. 推送到远程主分支 git push