<template><div class="app-container"><div class="mt30"></div><el-row :gutter="20"><!-- title --><!-- <div class="modt-box">導航管理</div> --><el-col :span="2"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><!-- default-expand-all=""  tree-border--><div class="lefttree"><div class="tit-box">菜單目錄</div><el-treeclass="treeclass"default-expand-all=""ref="tree":data="treeData":props="defaultProps"@node-click="nodeclick"@check-change="handleClick"check-strictlynode-key="id"><!-- 操作的插槽 --><span class="custom-tree-node" slot-scope="{ node, data }"><div class="custom-tree-node-wrapper"><span class="custom-tree-node-label">{{ node.label }}</span><span class="operate-btns"><dot-dropdown :eventsa="dropevents" :data="{node,data}" @addPeerNode="addPeerNode" @addNode="addNode" @editNode="editNode" @removeNode="removeNode" /></span></div></span></el-tree></div></el-col><el-col :span="2"><div class="grid-content bg-purple"></div></el-col><el-col :span="16"><div class="rightform"><div class="tit-box">{{tit}}</div><!-- <div class="mod-btnbox"><el-button type="primary" icon="el-icon-plus" @click="addModule">添加</el-button></div>--><el-form ref="form" :model="form" label-width="80px" :rules="rules"><!-- <el-form-item label="父級菜單" prop="parentId"><el-select v-model="form.parentId" placeholder="請選擇" class="selectw"><el-option v-for="parm in fmenu" :key="parm.id" :label="parm.name" :value="parm.id"></el-option></el-select></el-form-item> --><!-- <el-form-item label="上級菜單"><treeselectv-model="form.id":options="fmenu":normalizer="normalizer":show-count="true"placeholder="選擇上級菜單"/></el-form-item> --><el-form-item label="名稱" prop="name"><el-input v-model="form.name"></el-input></el-form-item><!-- <el-form-item label="圖標" prop="moduleIcon"><el-input v-model="form.moduleIcon"></el-input></el-form-item>--><el-form-item label="Path" prop="path"><el-input v-model="form.path"></el-input></el-form-item><el-form-item label="Link" prop="link"><el-input v-model="form.link"></el-input></el-form-item><el-form-item label="順序" prop="sortNum"><el-input v-model="form.sortNum"></el-input></el-form-item><el-form-item><el-button type="primary" @click="saveModule('form')">保存</el-button><el-button v-show="!form.id" type="primary" @click="reset('form')">重置</el-button><!-- <el-button type="primary" v-show="showdelete" @click="deleteModule">刪除</el-button> --></el-form-item></el-form></div></el-col><!-- <dot-dropdown :events="sysDropMenuEvents" :data="{node,data}" @addNode="addResource" /> --></el-row></div>
</template><script>
import {listCategory,getCategory,delCategory,addCategory,updateCategory,exportCategory,listCategorytree
} from "@/api/cms/category";
import DotDropdown from "./drop.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {name: "Category",components: {DotDropdown,Treeselect},data() {return {tit:'新建同級',dropevents: [{ label: '新建同級', funcName: 'addPeerNode' },{ label: '新建子級', funcName: 'addNode' },{ label: '編輯', funcName: 'editNode' },{ label: '刪除', funcName: 'removeNode' }],showdelete: false,treeData: [],defaultProps: {children: "children",label: "label"},form: {id: '',parentId:'',link:"",path: "",name: "",sortNum: "",},// rules表單驗證rules: {// parentId: [//   { required: true, message: "請選擇父級菜單", trigger: "blur" }// ],name: [{ required: true, message: "請輸入菜單名稱", trigger: "blur" }],link: [{ required: true, message: "請輸入link", trigger: "blur" }],path: [{ required: true, message: "請輸入path", trigger: "blur" }],sortNum: [{ required: true, message: "請輸入菜單順序", trigger: "blur" }]},fmenu: [],};},created() {// this.getList();this.getdata();// this.getmenu();// console.log(DotDropdown, " DotDropdown,");},methods: {//彈框的四個操作//新建同級addPeerNode(item){console.log(item,'新建同級')this.reset('form')this.form.id=''// 這個能確保建立子級的同級this.form.parentId=item.node.parent.data.idconsole.log(item.node.parent.data.id,"item.node.id")this.tit = '新建同級'},//新建子級addNode(item){console.log(item,'新建子級')let id = item.data.idthis.form.parentId = idthis.reset('form')this.form.id=''this.tit = '新建子級'},//編輯editNode(item){console.log(item,'編輯')this.tit = '編輯'let id = item.data.idgetCategory(id).then(res => {console.log(res, "根據id查信息");this.form = res.data// console.log(JSON.stringify(res))// this.form = res.data.data// this.$refs.tree.setCheckedNodes([])// this.$refs.tree.setCheckedNodes([arr])}).catch(err => {this.loading = false;this.$message.error("用戶管理獲取失敗，請稍后再試！");});},//刪除(ok)removeNode(item){this.tit = '刪除'let id = item.data.id// console.log(id,"kk")delCategory(id).then(res=>{this.getdata();this.reset('form')this.form.id=''this.tit="新建同級"this.$message.success("刪除成功！");}).catch(err => {this.$message.error("表刪除失敗，請稍后再試！");})},// 獲取數據getdata() {listCategorytree().then(res => {this.treeData = res.categorys;}).catch(err => {this.loading = false;this.$message.error("菜單管理列表失敗，請稍后再試！");});},// 添加addModule() {// this.showdelete = false;this.form.link = "";this.form.name = "";this.form.path = "";this.form.sortNum = "";this.form.parentId = "";this.form.id = "";},// 獲取父級菜單// getmenu() {//   listCategory()//     .then(response => {//     //為啥返回的parentid不一樣//     response.rows.forEach(a=>{//       a.parentId =0//     })//     this.fmenu = [];//     const menu = { id: '', menuName: "主類目", children: [] };//     menu.children = this.handleTree(response.rows, "id");//     this.fmenu.push(menu);//     })//     .catch(err => {//       this.loading = false;//       this.$message.error("父級菜單列表獲取失敗，請稍后再試！");//     });// },/** 轉換菜單數據結構 */// normalizer(node) {//   // console.log(node,"nnn")//   if (node.children && !node.children.length) {//     delete node.children;//   }//   return {//     id: node.id,//     label: node.name,//     children: node.children//   };// },// 復選變單選handleClick(data, checked, node) {if (checked) {// this.$refs.tree.setCheckedNodes([]);// this.$refs.tree.setCheckedNodes([data]);this.showdelete = true;} else {}},// 點擊節點nodeclick(arr, node, self) {},// 保存菜單saveModule(editData) {this.$refs[editData].validate(valid => {if (valid) {console.log(this.form,this.form.parentId,"idiidid")if (this.form.id != '') {updateCategory(this.form).then(response => {this.msgSuccess("修改成功");this.getdata();//  this.getmenu();this.reset('form')});} else {addCategory(this.form).then(response => {this.msgSuccess("新增成功");this.getdata();// this.getmenu();this.reset('form')});}} else {return false;}});},// 重置reset(formName) {this.$refs[formName].resetFields();}}
};
</script>
<style lang="less" scoped>
.mt30 {margin-bottom: 30px;
}
.el-tree-node__content {position: relative;
}
.el-tree-node__content :hover,
.el-tree-node__content :focus-within {.operate-btns {display: inline;}
}
.operate-btns {position: absolute;right: 2px;
}
//
.bg-purple {background: #d3dce6;}.rightform{border: #f1f3f7 solid 1px;padding: 30px 30px 20px 0px;box-shadow: 5px 5px 5px #cdcfcf;background: #fff}.lefttree{border: #f1f3f7 solid 1px;padding: 30px 30px 20px 0px;box-shadow: 5px 5px 5px #cdcfcf;background: #fff}.tit-box{// border-bottom: #666 solid 1px;text-align: center;width: 100%;/* margin: 0 auto; */margin-bottom: 20px;}</style>

自組件drop

<template><el-dropdown trigger="click" class="custom-tree-menu" size="small"><i class="el-icon-more rotate " /><el-dropdown-menu slot="dropdown"><el-dropdown-item v-for='(item,index) in eventsa' :key="index" :divided="index >0" @click.native="clickMenu(item)">{{item.label}}</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template>
<script>
export default {props: {eventsa: {type: Array,default: function() {return [{ label: '新建同級', funcName: 'addPeerNode' },{ label: '新建子級', funcName: 'addNode' },// { label: '分配操作', funcName: 'distributeAction' },{ label: '編輯', funcName: 'editNode' },{ label: '刪除', funcName: 'removeNode' }]}},// 注入數據data: {type: Object}},data(){return{// events2:[]  }},methods: {clickMenu(item) {console.log(item,"item",this.data)this.$emit(item.funcName, this.data)}}
}
</script>
<style scoped>.el-icon-more:before {content: "\E794";color: #c0c4cc;font-size: 15px;
}
.rotate {cursor: pointer;margin-left: 5px;transform: rotate(90deg);}/* .rotate:focus {width: 15px;height: 15px;border-radius: 4em;background-color: rgba(130, 132, 138, 0.2);
} */
</style>

實現的效果：

?有個問題?點擊按鈕就會在頁面頂部閃現

teleported這個設置為false?就好了