介绍：首先组件 | Element官网某些功能都具备了，这里我就把这些功能结合在一起更完美的使用，其次编辑节点官网是没有实例，所以这里搞了一套较完整的功能，其次编辑和添加，这里直接使用了弹窗（顾及到多个参数设置），接下来效果图展示！
效果图如下：
1，其中点击展开/折叠看个人需求；
2，组件中 :default-checked-keys="List_id" （如： 获取所有权限，匹配改个节点（角色）所包含的权限，修改时默认勾选，List_id 该角色拥有权限的id的集合！）讲述的可能稍有复杂，代码有注释可以看看！
（自己引入相关插件）
src: url('../css/element-icons.woff') format("woff");这个是图标不展示问题
文章来源：https://www.toymoban.com/news/detail-534670.html
这里就直接展示代码了！文章来源地址https://www.toymoban.com/news/detail-534670.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../css/index.css" />
<link rel="stylesheet" href="../css/element-ui.css" />
<script src="../js/vue.js"></script>
<script src="../js/element-ui.js"></script>
<style type="text/css">
@font-face {
font-family: element-icons;
src: url('../css/element-icons.woff') format("woff");
font-weight: 400;
font-display: "auto";
font-style: normal
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 5s
}
.fade-enter,
.fade-leave-active {
opacity: 0
}
.custom-tree-node {
flex: 1;
/* display: flex; */
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.show-hide:hover :nth-child(2) {
display: inline-block !important;
}
.el-tree-node__content {
height: 30px !important;
}
.el-input__inner {
height: 28px !important;
}
em {
color: red;
font-style: inherit !important;
}
.el-input__inner {
height: 20px;
}
.dialog_input>input {
height: 34px !important;
}
input.el-input__inner {
height: 34px !important;
}
.btn_is {
padding: 7px !important;
font-size: 15px !important;
background: rgb(39, 99, 220);
color: white;
}
.el-tree {
overflow-y: auto;
max-height: calc(100vh - 180px);
border-bottom: 1px solid #c8c8c8;
padding: 5px 0px;
}
.dialog_input {
width: 400px !important;
}
input.el-input__inner {
width: 80%;
}
</style>
</head>
<body>
<div id="app">
<template>
<el-button class="btn_is" size="medium" @click="toggleRowExpansion()">全部展开/折叠</el-button>
<el-input placeholder="输入关键字" v-model="filterText" highlight-current></el-input>
<!-- default-expand-all:默认打开全部
:expand-on-click-node="true" 打开点击当前行节点-->
<el-tree v-if="refreshTable" :default-expand-all="isExpandAll" :data="data" class="filter-tree"
:highlight-current="true" :filter-node-method="filterNode" show-checkbox node-key="id" ref="tree"
highlight-current :props="defaultProps" @node-drag-start="handleDragStart"
@node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd"
@node-drop="handleDrop" :allow-drop="allowDrop" :allow-drag="allowDrag" draggable
:expand-on-click-node="false" :default-checked-keys="List_id">
<span class="custom-tree-node show-hide keywords_em" slot-scope="{ node, data }">
<span class="ssss" v-if="filterText != ''" v-html="ruleTitle(node.label)"></span>
<span class="ddd" v-if="filterText == ''" v-text="data.label"></span>
<span style="display:none">
<el-button v-if="data.id !== 1" v-if="data.id!=1" type="text" size="mini"
@click="() => edit(node,data)">
<i class="el-icon-edit"></i>
</el-button>
<el-button type="text" size="mini" @click="() => append(node,data)">
<i class="el-icon-plus"></i>
</el-button>
<el-button type="text" size="mini" @click="() => remove(node, data)">
<i class="el-icon-delete"></i>
</el-button>
</span>
</span>
</el-tree>
<!-- 编辑 -->
<el-dialog style="width: 100%;height: 100%;" title="角色权限修改" :visible.sync="upd_dialog">
<div>
<el-form :model="upd_data">
<el-form-item label="名称：" width="80px">
<el-input class="dialog_input" v-model="upd_data.label"></el-input>
</el-form-item>
<el-form-item label="id：" width="80px">
<el-input class="dialog_input" v-model="upd_data.id"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<button class="submitbtn" @click="upd_submit">提 交</button>
<button class="censelbtn" @click="cancel">取 消</button>
</div>
</el-dialog>
<!-- 添加 -->
<el-dialog style="width: 100%;height: 100%;" title="角色权限添加" :visible.sync="zdydialog">
<div>
<el-form :model="add_data">
<el-form-item label="名称：" width="80px">
<el-input class="dialog_input" v-model="add_data.label"></el-input>
</el-form-item>
<el-form-item label="序号：" width="80px">
<el-input class="dialog_input" v-model="add_data.id"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<button class="submitbtn" @click="add_submit">提 交</button>
<button class="censelbtn" @click="cancel">取 消</button>
</div>
</el-dialog>
</template>
</div>
</body>
<script>
new Vue({
el: "#app",
data() {
return {
data: [{
id: 1,
label: '一级',
children: [{
id: 4,
label: '二级',
children: [{
id: 9,
label: '三级'
}, {
id: 10,
label: '三级'
}]
}]
}, {
id: 2,
label: '一级',
children: [{
id: 5,
label: '二级'
}, {
id: 6,
label: '二级'
}]
}, {
id: 3,
label: '一级',
children: [{
id: 7,
label: '二级'
}, {
id: 8,
label: '二级'
}]
}],
newApiGroupName: '',
defaultProps: {
children: 'children',
label: 'label'
},
updateApiGroup: {},
id: 1000,
resetNodeForm: {},
filterText: '',
newname: '',
isExpandAll: true,
refreshTable: true,
List_id: [5, 7], //匹配到的id默认勾选，
zdydialog: false,
upd_dialog: false,
add_data: {},
upd_data: {},
};
},
watch: {
filterText(val) {
console.log(val)
this.$refs.tree.filter(val);
}
},
created() {},
methods: {
edit(node, row) {
console.log(row)
this.upd_dialog = true
this.upd_data = row
},
upd_submit() {
//调取相关接口
this.upd_dialog = false
},
append(node, row) {
this.add_data = {
id: '',
label: '',
}
if (!row.children) {
this.$set(row, 'children', [])
}
row.children.push(this.add_data)
console.log(this.add_data)
this.zdydialog = true
},
add_submit() {
//调取相关接口
this.zdydialog = false
},
cancel() {
this.upd_dialog = false;
this.zdydialog = false;
},
// 全部展开/折叠
toggleRowExpansion() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
// 高亮搜索的关键字
ruleTitle(items) {
const title = items
const rep = new RegExp(this.filterText, 'g')
const resDtring = `<span style="color: #145afe">${this.filterText}</span>`
return title.replace(rep, resDtring)
},
//筛选结点
filterNode(value, data, node) {
if (!value) return true;
return this.findSearKey(node, value);
},
// 拖拽
handleDragStart(node, ev) {
console.log('drag start', node.data.label)
},
handleDragEnter(draggingNode, dropNode, ev) {
console.log('tree drag enter: ', dropNode.data.label)
},
handleDragLeave(draggingNode, dropNode, ev) {
console.log('tree drag leave: ', dropNode.data.label)
},
handleDragOver(draggingNode, dropNode, ev) {
console.log('tree drag over: ', dropNode.data.label)
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log(
'tree drag end: ',
dropNode && dropNode.data.label,
dropType
)
// 调后端更新
// this.updateApiGroup(this.data)
},
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log('tree drop: ', dropNode.data.label, dropType)
},
allowDrop(draggingNode, dropNode, type) {
if (dropNode.data.id === 1) {
return false
} else {
return true
}
},
allowDrag(draggingNode) {
// 顶层默认分组不允许拖拽
if (draggingNode.data.id === 1) {
return false
} else {
return true
}
// return draggingNode.data.apiGroupName.indexOf('三级 3-2-2') === -1
},
remove(node, data) {
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d => d.id === data.id)
children.splice(index, 1)
// this.updateApiGroup(this.data)
},
}
})
</script>
</html>到了这里，关于Element Ui Tree组件实现增、删、改、查、拖拽节点 的树形结构的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
