elementuiTree树形控件增删改查数据表结构：
前端代码
axios.js
import axios from 'axios';
import Qs from 'qs';
import {Message} from 'element-ui';
axios.defaults.baseURL = "/";
// 设置请求超时时间
axios.defaults.timeout = 30000;
// 设置post请求头
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
// 请求拦截elementui登录界面
quest.use(config => {
// 在发送请求之前做些什么验证token之类的
return config;
}, error => {
// 对请求错误做些什么
<({message: '请求超时!'})
(error);
})
// 响应拦截
sponse.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 对响应错误做点什么
ject(error);
});
// 封装get⽅法和post⽅法
/**
* get⽅法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
<(url, {
params: params
}).then(res => {
resolve(res.data);
//  Loading.service(true).close();
/
/  Message({message: '请求成功', type: 'success'});
}).catch(err => {
reject(err.data)
//  Loading.service(true).close();
Message({message: '加载失败', type: 'error'});
})
});
}
/**
* post⽅法，对应post请求
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data);
// Loading.service(true).close();
//  Message({message: '请求成功', type: 'success'});            })
.catch(err => {
reject(err.data)
// Loading.service(true).close();
Message({message: '加载失败', type: 'error'});
})
});
}
/**
* post⽅法，参数序列化
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function qspost(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, Qs.stringify(params))
.then(res => {
resolve(res.data);
//  Loading.service(true).close();
//  Message({message: '请求成功', type: 'success'});            })
.catch(err => {
reject(err.data)
// Loading.service(true).close();
Message({message: '加载失败', type: 'error'});
})
});
}
/**
* put⽅法，对应put请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function put(url, params) {
return new Promise((resolve, reject) => {
axios.put(url, params)
.then(res => {
resolve(res.data);
/
/ Loading.service(true).close();
//  Message({message: '请求成功', type: 'success'});            })
.catch(err => {
reject(err.data)
// Loading.service(true).close();
Message({message: '加载失败', type: 'error'});
})
});
}
/**
* delete
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function deletefn(url, params) {
return new Promise((resolve, reject) => {
axios.delete(url, params)
.then(res => {
resolve(res.data);
// Loading.service(true).close();
//  Message({message: '请求成功', type: 'success'});            })
.catch(err => {
reject(err.data)
// Loading.service(true).close();
Message({message: '加载失败', type: 'error'});
})
});
}
import {post, get, deletefn, put} from '../../utils/axios/axios'
//获取分类
export const getCategoryList = data => get('/item/category/list');
//新增⼀级菜单
export const addCategory = data=> post("/item/category/add",data);
/
/根据id删除节点
export const deleteCategoryById=data=>deletefn(`/item/category/${data.id}`,data);
//新增⼦节点
export  const addCategoryByParentId=data=>post(`/item/category/addByParentId`,data); //根据id编辑节点
export const editCategoryById=data=>put(`/item/category/${data.id}`,data); category.vue
<template>
<el-card class="box-card">
<!--⾯包屑-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>分类管理</el-breadcrumb-item>
</el-breadcrumb>
<el-button @click="addCategoryDialog()" >增加</el-button>        <!--新增⼀级对话框-->
<el-dialog
title="新增⼀级"
:visible.sync="addDialogVisible"
width="30%"
>
<el-form ref="form" :model="addForm" label-width="80px">
<el-form-item label="名称">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
</el-form>
<el-button @click="addDialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitCategory">确定</el-button>
</el-dialog>
<!--tree-->
<el-tree
:props="defaultProps"
:data="treeData"
show-checkbox
node-key="id"
:default-expand-all="false"
:
expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="() => append(data.id,data.isParent)">
增加
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(data.id)">
删除
</el-button>
<el-button
type="text"
size="mini"
@click="() => edit(data.id,data.isParent,data.parentId,data.name)">编辑
</el-button>
</span>
</span>
</el-tree>
<!--新增⼦菜单对话框-->
<el-dialog
title="新增⼦菜单"
:visible.sync="addCategoryByParentIdDialogVisible"
width="30%"
>
<el-form ref="form" :model="addForm" label-width="80px">
<el-form-item label="名称">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-button type="primary" @click="submitCategoryByParentId">确定</el-button>
</el-dialog>
<!--编辑节点对话框-->
<el-dialog
title="编辑"
:visible.sync="editCategoryByParentIdDialogVisible"
width="30%"
>
<el-form ref="form" :model="addForm" label-width="80px">
<el-form-item label="名称">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
</el-form>
<el-button @click="editCategoryByParentIdDialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitEditCategoryById">确定</el-button>
</el-dialog>
</el-card>
</template>
<script>
import {getCategoryList,addCategory,deleteCategoryById,addCategoryByParentId,editCategoryById} from "../../api/item/category";    export default {
name: "Category",
data() {
return {
treeData: [],
defaultProps: {
label: 'name'
},
addDialogVisible: false,
addForm: {
name: ''
},
addCategoryByParentIdDialogVisible:false,
parentId:'',
isParent:'',
id:'',
editCategoryByParentIdDialogVisible:false
}
},
created() {
},
methods: {
/**
* 获取数据
*/
getlist() {
getCategoryList().then(res => {
console.log("res")
console.log(res)
console.log("~~~~~~~~~")
console.Data)
}).catch(res => {
})
},
handleNodeClick(data) {
console.log(data);
},
//数组转化为树
arraytotree(arr) {
var top = [], sub = [], tempObj = {};
arr.forEach(function (item) {
if (item.parentId === 0) { // 顶级分类
top.push(item)
} else {
sub.push(item) // 其他分类
}
item.children = []; // 默然添加children属性
tempObj[item.id] = item // ⽤当前分类的id做key，存储在tempObj中
})
sub.forEach(function (item) {
var parent = tempObj[item.parentId] || {'children': []}
// 把当前分类加⼊到⽗级的children中
parent.children.push(item)
})
return top
},
addCategoryDialog() {
this.addDialogVisible = true;
},
/**
* 新增⼀级⽬录
*/
submitCategory(){
addCategory(this.addForm).then(res=>{
console.log(res)
if (de===200){
this.$message({
type: 'success',
message: '新增⼀级⽬录成功'
});
this.addForm={}
this.addDialogVisible=false
}
if (de===601){
this.$message({
type: 'error',
message: '已存在相同的⼀级⽬录'
});
this.addForm={}
this.addDialogVisible=false
}
}).catch(res=>{
})
},
append(id,isParent) {
this.id=id
this.isParent=isParent
console.log(id)
console.log(isParent)
this.addCategoryByParentIdDialogVisible=true;
},
/**
* 新增⼦节点
*/
submitCategoryByParentId(){
//把新增⼦节点的parentId设置为获取到的节点id
addCategoryByParentId({name:this.addForm.name,isParent:this.isParent,parentId:this.id}).then(res=>{ if (de===200){
this.$message({
type:'success',
message:'新增成功'
})
this.addCategoryByParentIdDialogVisible=false;
this.addForm={}
}
}).catch(res=>{
})
},
/
**
* 通过id删除节点
* @param id
*/
remove(id) {
console.log(id)
deleteCategoryById({id:id}).then(res=>{
if (res.data===200){
this.$message({
type: 'success',
message: '删除成功'
});
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。