el-tree的封装

星期五の夜

已于 2025-02-20 17:24:18 修改

阅读量638

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

于 2023-11-30 10:13:39 首次发布

本文链接：https://blog.csdn.net/weixin_43550562/article/details/134705596

文章描述了一个Vue项目中使用el-tree组件实现的动态树结构，包括节点操作（新增、编辑、删除）、数据过滤以及鼠标悬停和离开时的节点状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <el-container>
    <el-main>
      <jxudpAutoHeight type="default" :diff-height="60">
        <div class="filterText">
          <el-input v-model="filterText" placeholder="输入内容搜索"></el-input>
        </div>
        <el-tree
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          node-key="id"
          :filter-node-method="filterNode"
          :default-checked-keys="treeCheckedData"
          :default-expanded-keys="treeExpandData"
          highlight-current
          @node-click="handleNodeClick"
        >
          <p
            slot-scope="{ node, data }"
            class="custom-tree-node"
            @mouseover="mouseOver($event)"
            @mouseleave="mouseLeave($event)"
          >
            <span>{{ node.label }}</span>
            <span class="btns">
              <span v-if="isOperate" style="color: #488ef7">
                <i
                  class="el-icon-circle-plus-outline"
                  title="新增"
                  @click.stop="handleOperateNode(data, node, 'add')"
                >
                </i>
                <i
                  v-if="node.level !== 1"
                  class="el-icon-edit"
                  title="编辑"
                  @click.stop="handleOperateNode(data, node, 'edit')"
                >
                </i>
                <i
                  v-if="node.level !== 1"
                  class="el-icon-delete"
                  title="删除"
                  @click.stop="handleOperateNode(data, node, 'delete')"
                >
                </i>
              </span>
            </span>
          </p>
        </el-tree>
      </jxudpAutoHeight>
    </el-main>
  </el-container>
</template>
<script>
import projectSelectMix from 'iac/base/components/mixins/projectSelectMix.ts'
export default {
  components: {},
  mixins: [projectSelectMix],
  props: {
    isOperate: {
      type: Boolean,
      default: true
    } //是否有编辑操作
  },
  data() {
    return {
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeData: [],
      treeParams: {
        // parentId: '10000',
        projectId: '',
        needDeviceRate: true,
        isLazy: true,
        allData: true
      },
      treeUrl: '/vplatbase/EnvironmentRangService/findUnitAndRangTree',
      treeCheckedData: [],
      treeExpandData: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 电站切换
    switchProject(projectId, data) {
      this.treeParams.projectId = projectId
      this.getTreeData()
    },
    // 获取树数据
    getTreeData() {
      this.$request({ method: 'get', url: this.treeUrl, params: this.treeParams }).then(res => {
        if (this.tool.isSuccess(res)) {
          this.treeData = res.data.datas
          // 初始化的时候默认更新主节点id对应的table列表
          let initId = 'null'
          if (this.treeData?.length) {
            initId = this.treeData[0].id
            this.treeExpandData = [initId]
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(initId) // 默认选中节点第一个
            })
            this.$emit('initTree', initId)
          } else {
            this.$emit('initTree', '')
            this.$emit('initList', '')
          }
          this.handleNodeClick({ id: initId })
        }
      })
    },
    // 点击树节点, 发送树节点id，驱动table列表数据变化
    handleNodeClick(data, node, obj) {
      if (!data) {
        data = {}
      }
      data.projectId = this.treeParams.projectId
      this.$emit('handleNodeClick', data, node, obj)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 节点操作
    handleOperateNode(data, node, type) {
      this.$emit('handleOperateNode', data, node, type)
    },
    // 动态交互
    mouseOver(e) {
      if (this.getBtnSpan(e)) {
        this.getBtnSpan(e).style.display = 'block'
      }
    },
    mouseLeave(e) {
      if (this.getBtnSpan(e)) {
        this.getBtnSpan(e).style.display = 'none'
      }
    },
    getBtnSpan(e) {
      let btnsSpan = null
      const btns = e.target.querySelectorAll('.btns')
      if (btns.length <= 0) {
        btnsSpan = e.target.closestReplenish('.custom-tree-node')
      } else {
        btnsSpan = btns[0]
      }
      return btnsSpan
    }
  }
}
</script>
<style lang="less" scoped>
.filterText {
  padding: 10px;
}
.el-icon-edit {
  margin: 0 5px !important;
}
.custom-tree-node {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  position: relative;
}
.custom-tree-node .btns {
  display: none;
  margin-left: 4px;
  position: absolute;
  right: 10px;
  top: 0;
  // margin-right: 10px;
}
</style>

拓展知识：

1.el-tree加载完后默认点击第一个树节点的事件

document.querySelector('.el-tree-node__content').click()