封装一个多功能树组件&快捷键操作树

封装一个多功能树组件&快捷键操作树

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

基础功能使用了element-ui里面的树组件,可单选多选节点…
新增功能
1. ctrl+鼠标右键，选中当前树节点的第一级子节点
2. shift+鼠标右键，控制当前单个节点的选中和取消
树组件内容如下：

<template>
  <div>
      <el-tree
        @check="handleCheckChange"
        @keydown.ctrl.native="keydownCtrlHandle"
        @keydown.shift.native="keydownShiftHandle"
        @keyup.native="keyupHandle"
        :check-strictly="isStrictly"
    :data="templates"
    show-checkbox
    node-key="id"
    ref="tree">
    </el-tree>
  </div>
</template>
script:
<script>
export default {
    name: 'v-tree',
    props: {
        templates: Array
    },
    data () {
        return {
            isStrictly: false,
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            content: {},
            checkedArr: [],
            // 鼠标是否点击
            mouseClick: false,
            // ctrl是否点击
            ctrlClick: false
        }
    },
    methods: {
        handleCheckChange (data, checked) {
            // 初始化
            this.content = {}
            this.content = data
            this.mouseClick = true
            // 判断ctrl+鼠标点击事件
            if (this.mouseClick && this.ctrlClick) {
                // 初始化数组
                this.checkedArr = []
                // 存储当前节点key
                this.checkedArr.push(this.content.id)
                let childrenVal = this.content.children
                // 判断当前节点是否有子节点
                if (childrenVal) {
                    for (let i = 0; i < childrenVal.length; i++) {
                        // 存储当前节点第一层节点key
                        this.checkedArr.push(childrenVal[i].id)
                    }
                }
                // 通过key设置选中节点
                this.$refs.tree.setCheckedKeys(this.checkedArr)
            }
        },
        keydownCtrlHandle () {
            this.ctrlClick = true
            this.isStrictly = true
        },
        keydownShiftHandle () {
            this.isStrictly = true
        },
        keyupHandle () {
            this.isStrictly = false
            this.ctrlClick = false
        }
    }
}
</script>