介绍：首先组件 | Element官网某些功能都具备了，这里我就把这些功能结合在一起更完美的使用，其次编辑节点官网是没有实例，所以这里搞了一套较完整的功能，其次编辑和添加，这里直接使用了弹窗（顾及到多个参数设置），接下来效果图展示！
效果图如下：
1，其中点击展开/折叠看个人需求；
2，组件中 :default-checked-keys="List_id" （如： 获取所有权限，匹配改个节点（角色）所包含的权限，修改时默认勾选，List_id 该角色拥有权限的id的集合！）讲述的可能稍有复杂，代码有注释可以看看！
（自己引入相关插件）
src: url('../css/element-icons.woff') format("woff");这个是图标不展示问题
这里就直接展示代码了！
<!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 = truethis.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 = itemsconst 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.parentconst children = parent.data.children || parent.dataconst index = children.findIndex(d => d.id === data.id)children.splice(index, 1)// this.updateApiGroup(this.data)},}})</script></html>
