欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中使用elementui實現(xiàn)樹組件tree右鍵增刪改功能

 更新時間：2022年08月11日 11:22:39   作者：suoh's?Blog  
這篇文章主要介紹了vue中使用elementui實現(xiàn)對樹組件tree右鍵增刪改功能,右擊節(jié)點可進行增刪改，對節(jié)點數(shù)據(jù)進行模糊查詢功能，本文給大家分享了完整代碼，需要的朋友可以參考下

功能描述：

1、右擊節(jié)點可進行增刪改

2、可對節(jié)點數(shù)據(jù)進行模糊查詢

3、右擊第一級節(jié)點可以進行同級節(jié)點增加

4、雙擊節(jié)點或點擊修改節(jié)點 都可以對節(jié)點獲取焦點并進行修改，回車修改成功

5、可對節(jié)點進行拖拽，實現(xiàn)節(jié)點移動功能 

效果圖：

完整代碼：

<template>
    <div class="lalala tree-container">
            <el-input placeholder="輸入關鍵字進行過濾" v-model="filterText" class="search">
                </el-input>
            <el-tree :data="treeData" node-key="id" default-expand-all  @node-click="handleLeftclick" @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver"           @node-drag-end="handleDragEnd" @node-drop="handleDrop" @node-contextmenu="rightClick"   :filter-node-method="filterNode" draggable :allow-drop="allowDrop"           :allow-drag="allowDrag" ref="tree">
                        <span class="slot-t-node" slot-scope="{ node, data }" @dblclick="editNode(data)">
                                <span v-show="!data.isEdit">
                                    <span :class="[data.id>= 99 ? 'slot-t-node--label' : '']">{{node.label}}</span>
                                    </span>
                            <span v-show="data.isEdit">
                                    <el-input class="slot-t-input" size="mini" autofocus   v-model="data.label"   :ref="'slotTreeInput'+data.id"   @blur.stop="NodeBlur(node,data)"   @keydown.native.enter="NodeBlur(node,data)"></el-input>
                                </span>
                        </span>
                 </el-tree>
             <el-card class="box-card" ref="card" v-show="menuVisible">
                    <div @click="addSameLevelNode()" v-show="firstLevel">
                            <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;同級增加
                        </div>
                    <div class="add" @click="addChildNode()">
                            <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;子級增加
                        </div>
                    <div class="delete" @click="deleteNode()">
                            <i class="el-icon-remove-outline"></i>&nbsp;&nbsp;刪除節(jié)點
                        </div>
                    <div class="edit" @click="editNode()">
                            <i class="el-icon-edit"></i>&nbsp;&nbsp;修改節(jié)點
                        </div>
                </el-card>
    </div>
</template>
 
<script>
export default {
    name: 'tree',
    data() {
        return {
            eleId: '',
            isShow: false,
            currentData: '',
            currentNode: '',
            menuVisible: false,
            firstLevel: false,
            filterText: '',
            maxexpandId: 4,
            treeData: [{
                id: 1,
                label: '一級 1',
                isEdit: false,
                children: [{
                    id: 4,
                    label: '二級 1-1',
                    isEdit: false,
                    children: [{
                        id: 9,
                        label: '三級 1-1-1',
                        isEdit: false
                    }, {
                        id: 10,
                        label: '三級 1-1-2',
                        isEdit: false
                    }]
                }]
            }, {
                id: 2,
                label: '一級 2',
                isEdit: false,
                children: [{
                    id: 5,
                    label: '二級 2-1',
                    isEdit: false
                }, {
                    id: 6,
                    label: '二級 2-2',
                    isEdit: false
                }]
            }, {
                id: 3,
                label: '一級 3',
                isEdit: false,
                children: [{
                    id: 7,
                    label: '二級 3-1',
                    isEdit: false
                }, {
                    id: 8,
                    label: '二級 3-2',
                    isEdit: false,
                    children: [{
                        id: 11,
                        label: '三級 3-2-1',
                        isEdit: false
                    }, {
                        id: 12,
                        label: '三級 3-2-2',
                        isEdit: false
                    }, {
                        id: 13,
                        label: '三級 3-2-3',
                        isEdit: false
                    }]
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    methods: {
        NodeBlur(Node, data) {
            console.log(Node, data)
            if (data.label.length === 0) {
                this.$message.error('菜單名不可為空！')
                return false
            } else {
                if (data.isEdit) {
                    this.$set(data, 'isEdit', false)
                    console.log(data.isEdit)
                }
                this.$nextTick(() => {
                    this.$refs['slotTreeInput' + data.id].$refs.input.focus()
                })
            }
        },
        // 查詢
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
 
        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
        },
        // 鼠標右擊事件
        rightClick(event, object, Node, element) {
            console.log(event, object)
            this.currentData = object
            this.currentNode = Node
            if (Node.level === 1) {
                this.firstLevel = true
            } else {
                this.firstLevel = false
            }
            this.menuVisible = true
            // let menu = document.querySelector('#card')
            // /* 菜單定位基于鼠標點擊位置 */
            // menu.style.left = event.clientX + 'px'
            // menu.style.top = event.clientY + 'px'
            document.addEventListener('click', this.foo)
            this.$refs.card.$el.style.left = event.clientX + 10 + 'px'
            this.$refs.card.$el.style.top = event.clientY - 60 + 'px'
        },
        // 鼠標左擊事件
        handleLeftclick(data, node) {
            this.foo()
        },
        //  取消鼠標監(jiān)聽事件 菜單欄
        foo() {
            this.menuVisible = false
            //  要及時關掉監(jiān)聽，不關掉的是一個坑，不信你試試，雖然前臺顯示的時候沒有啥毛病，加一個alert你就知道了
            document.removeEventListener('click', this.foo)
        },
        // 增加同級節(jié)點事件
        addSameLevelNode() {
            let id = Math.ceil(Math.random() * 100)
            var data = { id: id, label: '新增節(jié)點' }
            this.$refs.tree.append(data, this.currentNode.parent)
        },
        // 增加子級節(jié)點事件
        addChildNode() {
            console.log(this.currentData)
            console.log(this.currentNode)
            if (this.currentNode.level >= 3) {
                this.$message.error('最多只支持三級！')
                return false
            }
            let id = Math.ceil(Math.random() * 100)
            var data = { id: id, label: '新增節(jié)點' }
            this.$refs.tree.append(data, this.currentNode)
        },
        // 刪除節(jié)點
        deleteNode() {
            this.$refs.tree.remove(this.currentNode)
        },
        // 編輯節(jié)點
        editNode(data) {
            console.log(data)
            this.currentData = data ? data : this.currentData
            if (!this.currentData.isEdit) {
                this.$set(this.currentData, 'isEdit', true)
            }
            // 獲取焦點
            this.$nextTick(() => {
                this.$refs['slotTreeInput' + this.currentData.id].focus()
            })
        },
        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)
        },
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        }
    },
    mounted() {
    }
}
</script>
<style scoped lang="less">
/* 點擊節(jié)點時的選中顏色 */
.tree-container /deep/.el-tree-node.is-current > .el-tree-node__content {
    color: blue !important;
}
 
.tree-container /deep/ .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
 
.tree-container /deep/ .el-icon-caret-right:before {
    content: "\e791";
    font-size: 18px;
}
 
.tree-container /deep/ .el-tree-node__expand-icon {
    margin-left: 15px;
    padding: 0px;
}
 
.tree-container /deep/ .el-tree-node__expand-icon.is-leaf {
    margin-left: 0px;
}
 
.tree-container /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
    // text-indent: 16px;
}
 
.tree-container /deep/ .el-tree-node__children {
    padding-left: 16px;
}
 
.tree-container /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
}
 
.tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
}
 
.tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
}
 
.tree-container /deep/ .el-tree-node:before {
    content: "";
    left: 10px;
    position: absolute;
    right: auto;
    border-width: 1px;
}
 
.tree-container /deep/ .el-tree-node:after {
    content: "";
    left: 10px;
    position: absolute;
    right: auto;
    border-width: 1px;
}
 
.tree-container /deep/ .el-tree-node:before {
    border-left: 1px dashed #ccc;
    bottom: 0px;
    height: 100%;
    top: -19px;
    width: 1px;
}
 
.tree-container /deep/ .el-tree-node:after {
    border-top: 1px dashed #ccc;
    height: 25px;
    top: 20px;
    width: 20px;
}
 
.el-tree-node :last-child:before {
    height: 40px;
}
 
.tree-container {
    margin: 10px;
}
.tree-container /deep/ .el-tree .el-tree-node {
    position: relative;
}
.tree-container /deep/ .el-tree-node .el-tree-node__content {
    height: 34px;
    padding-left: 0px !important;
    border: none;
}
.tree-container /deep/ .el-tree-node .el-tree-node__content::before {
    border-left: 1px dashed #ccc;
    height: 100%;
    top: 0;
    width: 1px;
    margin-left: 1px;
    margin-top: 0px;
    z-index: 8;
}
.tree-container
    /deep/
    .el-tree-node
    .el-tree-node__children
    .el-tree-node__content::before {
    border-left: 0px dashed #ccc;
    height: 100%;
    top: 0;
    width: 1px;
    margin-left: 1px;
    margin-top: 0px;
    z-index: 8;
}
 
.tree-container /deep/ .el-tree-node .el-tree-node__content::after {
    border-top: 1px dashed #ccc;
    height: 1px;
    top: 18px;
    width: 13px;
    margin-left: 1px;
    z-index: 8;
}
 
.tree-container
    /deep/
    .el-tree-node
    .el-tree-node__children
    .el-tree-node__content::after {
    border-top: 0px dashed #ccc;
}
 
.tree-container .el-tree-node .el-tree-node__content::before,
.tree-container .el-tree-node .el-tree-node__content::after {
    content: "";
    position: absolute;
    right: auto;
}
/deep/.el-table__placeholder {
    padding-left: 8px;
}
/deep/.el-card__body {
    padding: 10px !important;
    > div {
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        &:hover {
            color: blue;
        }
    }
}
/*.lalala {*/
/*position: relative;*/
/*}*/
  .text {
    font-size: 14px;
}
.el-tree {
    width: 20%;
    margin-top: 10px;
}
.search {
    width: 20%;
}
 
.item {
    padding: 18px 0;
}
 
.add {
    cursor: pointer;
    margin-top: 10px;
}
 
.delete {
    margin: 10px 0;
    cursor: pointer;
}
 
.edit {
    margin-bottom: 10px;
    cursor: pointer;
}
 
.search {
    cursor: pointer;
}
 
.box-card {
    width: 150px;
    position: absolute;
    z-index: 1000;
}
</style>

到此這篇關于vue中使用elementui實現(xiàn)對樹組件tree右鍵增刪改功能的文章就介紹到這了,更多相關vue elementui樹組件tree右鍵增刪改內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • 解決vue下載后臺傳過來的亂碼流的問題

    解決vue下載后臺傳過來的亂碼流的問題

    這篇文章主要介紹了解決vue下載后臺傳過來的亂碼流的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-12-12
  • vue?select組件綁定的值為數(shù)字類型遇到的問題

    vue?select組件綁定的值為數(shù)字類型遇到的問題

    這篇文章主要介紹了vue?select組件綁定的值為數(shù)字類型遇到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • vue?cli使用iview自定義主題遇到的坑及解決

    vue?cli使用iview自定義主題遇到的坑及解決

    vue?cli使用iview自定義主題遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • vue中data和props的區(qū)別詳解

    vue中data和props的區(qū)別詳解

    這篇文章主要介紹了vue中data和props的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作有一定的參考學習價值,需要的朋友們下面跟著小編來一起學習吧
    2024-01-01
  • vue?動態(tài)style?拼接寬度問題

    vue?動態(tài)style?拼接寬度問題

    這篇文章主要介紹了vue?動態(tài)style?拼接寬度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • 淺析vue如何實現(xiàn)手機橫屏功能

    淺析vue如何實現(xiàn)手機橫屏功能

    在項目開發(fā)中有時候需求需要手動實現(xiàn)橫屏功能,所以這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)手機橫屏功能,需要的小伙伴可以參考一下
    2024-03-03
  • VUE 實現(xiàn)element upload上傳圖片到阿里云

    VUE 實現(xiàn)element upload上傳圖片到阿里云

    這篇文章主要介紹了VUE 實現(xiàn)element upload上傳圖片到阿里云，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue 處理跨域問題及解決方法小結

    vue 處理跨域問題及解決方法小結

    跨域問題的出現(xiàn)是因為瀏覽器的同源策略問題，如果沒有同源策略我們的瀏覽器將會十分的不安全，隨時都可能受到攻擊，今天小編通過本文給大家介紹下vue 處理跨域問題，感興趣的朋友一起看看吧
    2021-09-09
  • Vue中computed和watch的區(qū)別

    Vue中computed和watch的區(qū)別

    在vue項目中我們常常需要用到computed和watch，那么我們究竟在什么場景下使用computed和watch呢？他們之間又有什么區(qū)別呢？本將給大家詳細的介紹一下,需要的朋友可以參考下
    2023-05-05
  • 基于iview的router常用控制方式

    基于iview的router常用控制方式

    這篇文章主要介紹了基于iview的router常用控制方式,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05

最新評論