Vue+Element ui實現(xiàn)樹形控件右鍵菜單

更新時間：2022年07月15日 09:41:09 作者：Советский

這篇文章主要為大家詳細介紹了Vue+Element ui實現(xiàn)樹形控件右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue+Element ui實現(xiàn)樹形控件右鍵菜單的具體代碼，供大家參考，具體內(nèi)容如下

需求

實現(xiàn)樹形控件右鍵菜單功能，有添加文件、刪除文件、重命名功能

一、按需引入ELEMENTUI組件

按需引入ELEMENTUI組件

二、實現(xiàn)菜單功能

1.TEMPLATE

代碼如下（示例）：

<!-- 樹形組件 -->
? <el-tree
? ? ? ? ? ? ? :data="data"
? ? ? ? ? ? ? @node-contextmenu="floderOption"
? ? ? ? ? ? ? @node-click="handleNodeClick"
? ? ? ? ? ? ? node-key="id"
? ? ? ? ? ? >
? ? ? ? ? ? <!-- ?-->
? ? ? ? ? ? ? <span?
? ? ? ? ? ? ? ? class="custom-tree-node"?
? ? ? ? ? ? ? ? slot-scope="{ node, data}"?
? ? ? ? ? ? ? ? style="width:100%"
? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? <i class="el-icon-folder" style="color:#DFBA49;margin-right:59x"></i>
? ? ? ? ? ? ? ? <span style="font-size:15px">{{node.label}}</span>
? ? ? ? ? ? ? </span>
? ? ? ? ? ? </el-tree>
? ? ? ? ? ? <!-- 右鍵菜單欄 -->
? ? ? ? ? ? <div :style="{'z-index':999,'position':'fixed',left:optionCardX + 'px',
? ? ? ? ? ? top: optionCardY + 'px',
? ? ? ? ? ? width:'100px',
? ? ? ? ? ? background:'white','box-shadow':'0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)'}"?
? ? ? ? ? ? v-show="optionCardShow"
? ? ? ? ? ? id="option-button-group">
? ? ? ?<el-button @click="append" class="option-card-button">新建</el-button>
? ? ? ?<el-button @click="remove" class="option-card-button">刪除</el-button>
? ? ? ?<el-button @click="rename" class="option-card-button">重命名</el-button>
</div>

2.JS

代碼如下（示例）：

// 右鍵菜單屬性設(shè)置
? ? floderOption(e,data,n,t){
? ? ? this.optionCardShow = false
? ? ? this.optionCardX =e.x
? ? ? this.optionCardY = e.y - 110
? ? ? this.optionData = data
? ? ? this.node = n
? ? ? this.tree = t
? ? ? this.optionCardShow = true
? ? },
? ? // 點擊框外區(qū)域 隱藏菜單
? ? OptionCardClose(event) {
? ? ? var currentCli = document.getElementById("option-button-group");
? ? ? if (currentCli) {
? ? ? ? if (!currentCli.contains(event.target)) { //點擊到了id為option-button-group以外的區(qū)域，就隱藏菜單
? ? ? ? ? this.optionCardShow = false;
? ? ? ? }
? ? ? }
? ? },
? ? // 創(chuàng)建
? ? append() {
? ? ? this.optionCardShow = false
? ? ? this.$prompt('請輸??件名', '提?', { // 彈出框?于輸??件名
? ? ? ? confirmButtonText: '確定',
? ? ? ? cancelButtonText: '取消',
? ? ? ? inputPattern: /^\S{1,10}$/,
? ? ? ? inputErrorMessage: '命名不合法，請重新命名'
? ? ? }).then(({
? ? ? ? value
? ? ? }) => {
? ? ? ? if (this.node.level >= 3) {
? ? ? ? ? this.$message.error("最多只?持三級！")
? ? ? ? ? return false;
? ? ? ? }
? ? ? ? console.log(this.optionData.id);
? ? ? ? const newChild = { // 新建?個?節(jié)點
? ? ? ? ? id: id++,
? ? ? ? ? label: value,
? ? ? ? ? children: []
? ? ? ? };

? ? ? ? // TODO 測試修改
? ? ? ? //測試，在樹形控件下方顯示創(chuàng)建后的內(nèi)容
? ? ? ? const newSet = {
? ? ? ? ? id: id++,
? ? ? ? ? name:value
? ? ? ? }

? ? ? ? console.log(this.optionData.children);
? ? ? ? if (!this.optionData.children) { // 如果當前節(jié)點沒有?節(jié)點，那就新建?個空的?節(jié)點數(shù)組，?來存放新建??件夾
? ? ? ? ? this.$set(this.optionData, 'children', []);
? ? ? ? ? this.$set(this.testData2, 'children', []) //測試，在樹形控件下方顯示創(chuàng)建后的內(nèi)容
? ? ? ? }
? ? ? ? this.optionData.children.push(newChild); // 插?
? ? ? ? this.testData2.push(newSet)
? ? ? ? //同時展開節(jié)點
? ? ? ? if (!this.node.expanded) {
? ? ? ? ? this.node.expanded = true
? ? ? ? }
? ? ? ? this.$message({
? ? ? ? ? type: 'success',
? ? ? ? ? message: '?件夾新建成功！'
? ? ? ? });
? ? ? }).catch(() => {
? ? ? ? this.$message({
? ? ? ? ? type: 'info',
? ? ? ? ? message: '創(chuàng)建失敗'
? ? ? ? });
? ? ? });
? ? },
? ? // 刪除
? ? remove() {
? ? ? this.optionCardShow = false
? ? ? this.$confirm('此操作將永久刪除該?件夾, 是否繼續(xù)?', '提?', {
? ? ? ? confirmButtonText: '確定',
? ? ? ? cancelButtonText: '取消',
? ? ? ? type: 'warning'
? ? ? }).then(() => {
? ? ? ? const parent = this.node.parent;
? ? ? ? const children = parent.data.children || parent.data;
? ? ? ? const index = children.findIndex(d => d.id === this.data.id);
? ? ? ? children.splice(index, 1);
? ? ? ? this.$message({
? ? ? ? ? type: 'success',
? ? ? ? ? message: '刪除成功!'
? ? ? ? });
? ? ? }).catch(() => {
? ? ? ? this.$message({
? ? ? ? ? type: 'info',
? ? ? ? ? message: '已取消刪除'
? ? ? ? });
? ? ? });
? ? },
? ? // 重命名
? ? rename(){
? ? ? console.log(this.node)
? ? ? this.optionCardShow = false
? ? ? this.$prompt('請輸??件名', '提?', {
? ? ? ? confirmButtonText: '確定',
? ? ? ? cancelButtonText: '取消',
? ? ? ? inputPlaceholder: this.node.data.label,
? ? ? ? inputPattern: /^\S{1,10}$/,
? ? ? ? inputErrorMessage: '?件名長度在1到10之間'
? ? ? }).then(({
? ? ? ? value
? ? ? }) => {
? ? ? ? this.node.data.label = value
? ? ? ? this.$message({
? ? ? ? ? type: 'success',
? ? ? ? ? message: '?件夾已重命名！'
? ? ? ? });
? ? ? }).catch(() => {
? ? ? ? this.$message({
? ? ? ? ? type: 'info',
? ? ? ? ? message: '取消輸?'
? ? ? ? });
? ? ? });
? ? },
? ? test(node) {
? ? ? console.log(node.id);
? ? ? this.clickNode = node.id
? ? },
? ? handleNodeClick(item, data) {
? ? ? console.log('item: ',item,'data: ', data);
? ? ? this.test(data)
? ? }

3.STYLE

.folder-box {
height: 100%;
}

.option-card-button {
width: 100%;
margin-left: 0;
font-size: 10px;
border-radius: 0;
}

4.data()

data(){
? ? return{
? ? ? optionCardX:'',
? ? ? optionCardY:'',
? ? ? optionCardShow:false,
? ? ? optionData:[],
? ? ? clickNode:0,
? ? ? node:null,
? ? ? tree:null,
? ? ? data:[{
? ? ? ? id:1,
? ? ? ? label:'圖層樹',
? ? ? }],
? ? ? testData:[
? ? ? ? {
? ? ? ? ? name:'影像'
? ? ? ? },
? ? ? ? {
? ? ? ? ? name:'地形'
? ? ? ? },
? ? ? ? {
? ? ? ? ? name:'模型'
? ? ? ? },
? ? ? ? {
? ? ? ? ? name:'矢量'
? ? ? ? },
? ? ? ],
? ? ? testData2:[
? ? ? ? {
? ? ? ? ? id:0,
? ? ? ? ? name:''
? ? ? ? },
? ? ? ? {
? ? ? ? ? id:1,
? ? ? ? ? name:'圖層樹'
? ? ? ? },
? ? ? ]
? ? }
? },