vue+element+axios Tree 树形控件的基本使用
vue+element+axios Tree 树形控件的基本使用
这是我前面做的页面！今天有空来记录一下！！！
一样的接口还是被我删了，需要模拟数据的可以参考 element官网: https://element.eleme.cn/#/zh-CN/component/tree#shu-jie-dian-de-xuan-ze.
如果有错误或者有问题的可以直接私信我或者直接在评论区留言！我看到的第一时间会进行纠正或者回答的！！！
直接上代码了：
<template>
<div class="home">
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
<el-tree
:data="data"
node-key="id"
default-expand-all
@node-click="getCheckedNodes"
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{
{
node.label }}</span>
<span>
<el-button
v-if="c"
type="text"
size="mini"
@click="() => remove(node, data)"
icon="el-icon-delete"
></el-button>
</span>
</span>
</el-tree>
</el-col>
<el-col :span="20" :offset="1">
<el-button-group>
<el-button size="small" type="primary" @click="a=!a,b=false">新增</el-button>
<el-button size="small" type="primary" @click="change1">编辑</el-button>
<el-button size="small" type="primary" @click="c=!c">删除</el-button>
</el-button-group>
<hr />
<h4 v-show="a">新增</h4>
<h4 v-show="b">编辑</h4>
<el-form ref="form" :model="form" label-width="90px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="菜单名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所有人可见">
<el-checkbox-group v-model="form.type">
<el-checkbox label name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="父级菜单">
<el-select v-model="form.menu" placeholder="请选择父级">
<el-option label="新增一个父级菜单" value="0"></el-option>
<span v-for="item in data" :key="item.id">
<el-option :label="item.label" :value="item.id"></el-option>
</span>
</el-select>
</el-form-item>
<el-form-item label="路径">
<el-input v-model="form.route"></el-input>
</el-form-item>
<!-- <el-form-item label="备注">
<el-input type="textarea" v-model="form.remarks"></el-input>
</el-form-item> -->
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
</el-form>
</el-col>
</div>
</template>
<script>
import Axios from "axios";
let id = 1000;
export default {
data() {
return {
suerindex: "",
userindex: "",
username: "",
inttype: 0,
type: [],
route: "",
remarks: "",
menu: "",
display: "",
a: false,
b: false,
c: false,
checked: true,
dialogVisible: true,
mun: 11,
mun1: 1003,
editObj: 0,
editObj1: {
id: "",
label: "",
menu: "",
route: "",
remarks: "",
delivery: false,
type: [],
},
editObj2: {
id: "",
label: "",
menu: "",
route: "",
remarks: "",
delivery: false,
type: [],
children: [],
},
chaObj: {
id: "",
label: "",
menu: "",
route: "",
remarks: "",
delivery: false,
type: [],
children: [],
},
data: [],
// data: [
// {
// id: 1,
// label: "基础数据",
// route: "",
// menu: "",
// remarks: "",
// type: [],
// children: [
// {
// id: 2,
// label: "用户管理",
// route: "",
// menu: "",
// remarks: "",
// type: []
// },
// {
// id: 3,
// label: "字典管理",
// route: "",
// menu: "",
// remarks: "",
// type: []
// },
// {
// id: 4,
// label: "操作日志",
// menu: "",
// route: "",
// remarks: "",
// type: []
// },
// {
// id: 5,
// label: "授权管理",
// menu: "",
// route: "",
// remarks: "",
// type: []
// },
// {
// id: 6,
// label: "规则管理",
// menu: "",
// route: "",
// remarks: "",
// type: []
// }
// ]
// },
// {
// id: 7,
// label: "运营数据",
// menu: "",
// route: "",
// remarks: "",
// type: [],
// children: [
// {
// id: 1001,
// label: "设备管理",
// route: "",
// menu: "",
// remarks: "",
// type: []
// },
// {
// id: 1002,
// label: "定位配置",
// menu: "",
// route: "",
// remarks: "",
// type: []
// }
// ]
// }
// ],
defaultProps: {
children: "children",
label: "label",
},
form: {
name: "",
menu: "",
route: "",
remarks: "",
delivery: false,
type: [],
},
};
},
created() {
this.fuzhi();
},
methods: {
fuzhi() {
var api = "";
Axios.get(api)
.then((response) => {
this.data = response.data.result;
//console.log(this.data);
//location. reload()
// for(var i=0;i
// if(response.data.result[i].data.scope == 1){
// var e=""
// }
// this.data = {
// id:response.data.result[i].id,
// label:response.data.result[i].label,
// parentid:response.data.result[i].parentid,
// type:e,
// data:response.data.result[i].data,
// }
// }
})
.catch((error) => {
console.log(error);
});
},
handleDragStart(node, ev) {
console.log("drag start", node);
},
handleDragEnter(draggingNode, dropNode, ev) {
console.log("tree drag enter: ", dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
console.log("tree drag leave: ", dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
console.log("tree drag over: ", dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log("tree drag end: ", dropNode && dropNode.label, dropType);
},
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log("tree drop: ", dropNode.label, dropType);
},
allowDrop(draggingNode, dropNode, type) {
if (dropNode.data.label === "二级 3-1") {
return type !== "inner";
} else {
return true;
}
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
},
getCheckedNodes(data) {
this.userindex = data.id;
this.username = data.label;
this.menu = data.parentId;
if (data.data.scope == "1") {
this.type = [""];
}else{
this.type=[];
}
console.log(data);
},
change1(data) {
//console.log(data)
this.a = false;
this.b = !this.b;
if ((this.b = true)) {
this.form.name = this.username;
this.form.menu = this.menu;
this.form.type = this.type;
} else {
}
},
onSubmit() {
// for (var i = 0; i < this.data.length; i++) {
// if (this.data[i].id > this.mun) {
// this.mun = this.data[i].id;
// }
// }
// for (var i = 0; i < this.data[0].children.length; i++) {
// if (this.data[0].children[i].id > this.mun) {
// this.mun = this.data[0].children[i].id;
// }
// }
// for (var i = 0; i < this.data[1].children.length; i++) {
// if (this.data[1].children[i].id > this.mun1) {
// this.mun1 = this.data[1].children[i].id;
// }
// }
// 新增
//(this.form.menu);
if (this.a == true) {
if (this.form.menu == "") {
this.$confirm("请选择父级或者创建一个父级");
}
if (this.form.menu == "0") {
this.editObj2.label = this.form.name;
//this.editObj2.id = this.mun++;
this.editObj2.route = this.form.route;
this.editObj2.remarks = this.form.remarks;
this.editObj2.type = this.form.type;
if (this.form.type == null) {
this.inttype = 0;
} else {
this.inttype = 1;
}
Axios.post("", {
name: this.editObj2.label,
path: this.editObj2.route,
parentid: 0,
cpid: 1,
cpname: "admin",
scope: this.inttype,
img: "favicon.ico",
})
.then((response) => {
console.log(response);
if (response.data.code == 10001) {
//this.list1.push(q);
this.$message({
message: response.data.result,
type: "success",
});
this.$options.methods.fuzhi();
this.$forceUpdate(this.data);
//location.reload();
//this.data.push(this.editObj2);
//this.seeObj.push(q)
} else {
this.$message({
message: response.data.msg,
type: "warning",
});
}
})
.catch(function (error) {
console.log(error);
});
//(this.editObj2);
this.editObj2 = {
id: "",
label: "",
menu: "0",
route: "",
remarks: "",
delivery: false,
type: [],
children: [],
};
this.form = {
name: "",
menu: "",
route: "",
remarks: "",
delivery: false,
type: [],
};
}
for (var i = 0; i < this.data.length; i++) {
if (this.data[i].id == this.form.menu) {
this.editObj1.label = this.form.name;
//this.editObj1.id = this.mun++;
this.editObj1.route = this.form.route;
this.editObj1.remarks = this.form.remarks;
this.editObj1.type = this.form.type;
this.editObj1.menu = this.form.menu;
if (this.form.type == "") {
this.inttype = 1;
} else {
this.inttype = 0;
}
Axios.post("", {
name: this.editObj1.label,
path: this.editObj1.route,
parentid: this.editObj1.menu,
cpid: 1,
cpname: "admin",
scope: this.inttype,
img: "favicon.ico",
})
.then((response) => {
console.log(response);
if (response.data.code == 10001) {
//this.list1.push(q);
this.$message({
message: response.data.result,
type: "success",
});
// this.data[i].children.push(this.editObj1);
this.$options.methods.fuzhi();
this.$nextTick(function () {
this.data;
});
location.reload();
//this.data.push(this.editObj2);
//this.seeObj.push(q)
} else {
this.$message({
message: response.data.msg,
type: "warning",
});
}
})
.catch(function (error) {
console.log(error);
});
//console.log(this.data);
this.editObj1 = {
id: "",
label: "",
menu: "0",
route: "",
remarks: "",
delivery: false,
type: [],
};
this.form = {
name: "",
menu: "",
route: "",
remarks: "",
delivery: false,
type: [],
};
}
}
this.a = false;
}
// 编辑
else if (this.b == true) {
this.chaObj.label = this.form.name;
this.chaObj.menu = this.form.menu;
this.chaObj.route = this.form.route;
this.chaObj.remarks = this.form.remarks;
this.chaObj.type = this.form.type;
//this.chaObj.id = this.data[i].children[j].id;
this.editObj1.label = this.form.name;
this.editObj1.route = this.form.route;
this.editObj1.remarks = this.form.remarks;
this.editObj1.type = this.form.type;
this.editObj1.menu = this.form.menu;
if (this.form.type == 1) {
this.inttype = 1;
} else {
this.inttype = 0;
}
Axios.put("", {
id: this.userindex,
name: this.editObj1.label,
path: this.editObj1.route,
parentid: this.editObj1.menu,
cpid: 1,
cpname: "admin",
scope: this.inttype,
img: "favicon.ico",
})
.then((response) => {
console.log(response);
this.$options.methods.fuzhi();
if (response.data.code == 10001) {
//this.list1.push(q);
this.$message({
message: response.data.result,
type: "success",
});
//location.reload();
//this.$set(this.data[i].children, j, this.chaObj);
//this.data.push(this.editObj2);
//this.seeObj.push(q)
} else {
this.$message({
message: response.data.msg,
type: "warning",
});
}
})
.catch(function (error) {
console.log(error);
});
}
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex((d) => d.id === data.id);
this.$confirm("确认是否要删除？")
.then((_) => {
Axios.delete("" , {
data: {
id: data.id,
},
}).then((res) => {
console.log(res);
this.$options.methods.fuzhi();
if (res.data.code == 10001) {
this.$message({
message: res.data.result,
type: "success",
});
//children.splice(index, 1);
//location.reload();
} else {
this.$message({
message: res.data.msg,
type: "warning",
});
}
});
})
.catch((_) => {
});
// this.fuzhi();
this.$options.methods.fuzhi();
},
renderContent(h, {
node, data, store }) {
return (
<span class="custom-tree-node">
<span>{
node.label}</span>
<span>
<el-button
size="mini"
type="text"
on-click={
() => this.append(data)}
></el-button>
<el-button
size="mini"
type="text"
on-click={
() => this.change(data)}
></el-button>
<el-button
size="mini"
type="text"
on-click={
() => this.remove(node, data)}
></el-button>
</span>
</span>
);
},
},
};
</script>
<style scoped>
.el-select {
position: relative;
}
</style>