Element中Tree树结构组件中实现Shift多选

最新推荐文章于 2024-08-02 11:39:51 发布

默默花上开

最新推荐文章于 2024-08-02 11:39:51 发布

阅读量643

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/leilei__66/article/details/127125322

版权

Vue 专栏收录该内容

27 篇文章 9 订阅

订阅专栏

Element中Tree树结构组件中实现Shift多选

无孩子的树

用到的属性和方法

在这里插入图片描述

直接上代码

<template>
  <div class="treeDiv">
    <el-tree
      ref="tree"
      highlight-current
      :data="treeData_"
      :default-expand-all="true"
      node-key="primaryKey"
      @node-click="treeSelectChange"
    ></el-tree>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      treeData_: [
        {
          primaryKey: 1,
          label: '1-1'
        },
        {
          primaryKey: 2,
          label: '1-2'
        },
        {
          primaryKey: 3,
          label: '1-3'
        },
        {
          primaryKey: 4,
          label: '1-3'
        },
        {
          primaryKey: 5,
          label: '1-3'
        },
        {
          primaryKey: 6,
          label: '1-3'
        },
        {
          primaryKey: 7,
          label: '1-3'
        }
      ],
      treeData: [], //存放多选的选中id
    }
  },

  mounted() {},

  methods: {
    // 点击树节点
    treeSelectChange(target, node) {

      let event_ = window.event || arguments.callee.caller.arguments[0]
      let shiftKeyDowned = event_.shiftKey

      if (shiftKeyDowned) {
        if (node.checked) {
          this.treeData.forEach((ele, index) => {
            if (ele == target.primaryKey) {
              this.$refs.tree.setChecked(target, false)
              this.$refs.tree.setCurrentKey()
              this.treeData.splice(index)
            }
          })
        } else {
          this.$refs.tree.setChecked(target, true)
          this.$refs.tree.setCurrentKey(target.primaryKey)
          this.treeData.push(target.primaryKey)
        }

      } else {
        this.treeData.forEach((ele) => {
          this.$refs.tree.setCurrentKey(ele)
          this.$refs.tree.setChecked(ele, false)
        })
        this.treeData = []

        this.$refs.tree.setCurrentKey(target.primaryKey)
        this.$refs.tree.setChecked(target, true)
        this.treeData.push(target.primaryKey)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.treeDiv {
  user-select: none;
}
/deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #fff;
  .el-tree-node__label {
    background-color: #d5e8fc;
  }
}

/deep/
  .el-tree--highlight-current
  .el-tree-node.is-checked
  > .el-tree-node__content {
  background-color: #fff;
  .el-tree-node__label {
    background-color: #d5e8fc;
  }
}
</style>