基于vue、iview实现tree组件可拖拽、双击编辑_vue可编辑树形组件,iviewtree拖拽资源-CSDN下载

共2个文件

vue：2个

5星 · 超过95%的资源需积分: 50 17 浏览量 2021-09-23 15:20:21 上传评论 1 收藏 9KB ZIP 举报

在IT行业中，前端开发是至关重要的一个领域，而Vue.js作为一个流行的JavaScript框架，因其轻量级、高效且易于学习的特点，被广泛应用于构建用户界面。IView是一个基于Vue的UI组件库，它提供了丰富的预设组件，使得开发者可以快速搭建美观的后台管理系统。在这个场景下，我们将探讨如何利用Vue和IView实现一个具有拖拽和双击编辑功能的Tree组件。让我们了解一下`Tree`组件。在Web应用中，`Tree`组件通常用于展示层级关系的数据，如文件系统、组织结构等。IView中的`Tree`组件提供了多种交互方式，包括展开/折叠节点、选择节点以及自定义操作等。实现节点拖拽功能需要结合Vue的响应式特性与HTML5的拖放API（Drag and Drop API）。在`Tree`节点上设置`draggable`属性为`true`，然后注册`dragstart`、`dragenter`、`dragover`、`drop`和`dragend`等事件处理函数。在这些事件中，你可以处理拖动过程中的数据传输、目标位置判定及拖放后的数据更新等逻辑。Vue的响应式系统会自动更新视图，反映数据的变化。双击编辑功能可以通过监听`dblclick`事件来实现。当用户双击某个节点时，可以弹出一个输入框让用户编辑节点文本，修改后保存并更新数据源。同时，需要确保在编辑过程中其他节点的操作不会影响到当前编辑状态，比如阻止拖拽或点击事件的默认行为。在使用IView的`Tree`组件时，你需要定义好数据结构，一般包含节点ID、父节点ID、节点文本等属性。为了支持拖拽，还需要添加额外的字段来记录拖动状态，例如拖动源节点ID和目标节点ID。为了实现以上功能，你需要对Vue的生命周期、组件通信、事件绑定、数据操作有深入理解。同时，HTML5的拖放API也需要一定的掌握，包括数据Transfer对象、拖放区域判定和阻止默认行为等。在实际开发中，可能还会涉及到权限控制、异步加载子节点、动画效果等问题。例如，通过Vue的计算属性和watcher可以动态调整节点的显示状态；对于大量数据，可以采用懒加载策略，只在需要时请求服务器获取子节点；为了提升用户体验，可以添加过渡动画使拖拽过程更加平滑。实现一个具有拖拽和双击编辑功能的`Tree`组件需要综合运用Vue和IView提供的功能，结合HTML5的拖放API，同时考虑性能优化和用户体验。这不仅考验开发者的技术功底，也要求对前端开发有全面的理解。通过这样的实践，你可以提升自己的前端开发技能，并在项目中创造出更富有交互性的功能。

资源详情

资源评论

资源推荐

收起资源包目录

tree.zip （2个子文件）

tree

component

index.vue 29KB

page

index.vue 12KB

<template> <div class="tree-wrapper" :style="'height:' + (showQuery ? 'calc(100% - 35px)' : '')"> <div v-if="showQuery" class="tree-search-box"> <Input v-model="queryModel" placeholder="请输入" size="small" icon="ios-search" @on-enter="handleQuery" @on-click="handleQuery"/>   </div> <Tree ref="tree" v-bind="$attrs" v-on="$listeners" :empty-text="emptyText" :render="renderContent"></Tree> <Dropdown transfer ref="contentMenu" style="display: none" trigger="click" transfer-class-name="tree-drop-down" v-if="!disabledAll" @on-click="changeClick"> <DropdownMenu slot="list"> <slot name="topItem" :nodeInfo="nodeInfo"></slot> <DropdownItem name="add" v-if="!disabledAdd"><Icon custom="iconfont iconxinjian1" style="margin-right: 10px"></Icon>{{this.addName}}</DropdownItem> <DropdownItem name="edit" v-if="!disabledEdit"><Icon type="md-create" style="margin-right: 10px" size="16"></Icon>{{this.editName}}</DropdownItem> <DropdownItem name="delete" v-if="node.nodeKey != 0 && !disabledDelete"> <Icon type="md-trash" style="margin-right: 10px" size="16"></Icon>{{this.deleteName}} </DropdownItem> <slot name="bottomItem" :nodeInfo="nodeInfo"></slot> </DropdownMenu> </Dropdown> </div> </template> <script> export default { data () { return { timeId: '', queryModel: '', selectData: [], // 输入框要修改的内容 inputContent: '', nodeInfo: [], oldData: {}, root: '', node: '', // 修改前的TreeNode名称 oldName: '', editState: false, disabledEdit: false, disabledDelete: false, disabledAdd: false, dragstartNode: '', // 拖拽的节点 dragstartData: '', // 拖拽的节点数据 dropPosition: '', // 节点的位置 dragOverClass: '', // 0：目标节点内 -1：目标节点上 1：目标节点下 overNodeKey: '', // 拖拽经过的节点 nodeIndex: '', // 目标节点的角标， } }, props: { title: { // 传入的字段 type: String, default: 'title' }, keyId: { // 传入的字段 type: String, default: 'value' }, parentValue: { // 传入的字段 type: String, default: 'parentValue' }, showQuery: { type: Boolean, default: false }, emptyText: { // 没有数据时默认显示 type: String, default: '' }, disabledAll: { // 是否控制所有权限不可使用 type: Boolean, default: false }, maxLength: { // 是否控制所有权限不可使用 type: Number, default: 50 }, inputWidth: { // 是否控制所有权限不可使用 type: Number, default: 12 }, draggable: { // 控制是否可以拖拽 type: Boolean, default: false }, addName: { // 新建名称 type: String, default: '新建' }, deleteName: { // 删除名称 type: String, default: '删除' }, editName: { // 编辑名称 type: String, default: '编辑' }, editNodeBefore: { // 编辑前的方法，回调 type: Function, default: (data1, data2, name, callback) => { callback() } }, deleteNodeBefore: { // 删除前的方法，回调 type: Function, default: (data1, data2, callback) => { callback() } }, onDragBefore: { // 拖拽前的方法，回调 type: Function, default: (data1, data2, data3, callback) => { callback() } } }, methods: { renderContent (h, { root, node, data }) { return h('span', { class: { 'ivu-tree-title ivu-tree-title-selected': (data.selected || data.checked) && !this.$attrs.showCheckbox, 'ivu-tree-title': !((data.selected || data.checked) && !this.$attrs.showCheckbox), 'tree-drag-over': this.overNodeKey === data[this.keyId] && this.dragOverClass === 0, 'tree-drag-over-top': this.overNodeKey === data[this.keyId] && this.dragOverClass === -1 && this.nodeIndex === 0, 'tree-drag-over-bottom': this.overNodeKey === data[this.keyId] && this.dragOverClass === 1 }, style: { display: 'inline-block', lineHeight: '1.1rem', cursor: 'pointer', border: '1px solid transparent' }, attrs: { draggable: this.draggable && !(node.nodeKey === 0) && !data.disabled && !data.disabledDrag }, on: { click: () => { let _this = this if (!data.disabled) { // 控制节点是否可以选择 if (_this.timeId) { // 防止双击事件触发单击事件，但是还会概率触发 window.clearTimeout(_this.timeId) _this.timeId = null } _this.timeId = setTimeout(function () { if (_this.$attrs.multiple) { data.selected = !data.selected // data.checked = !data.checked _this.selectData.push(data) _this.onSelectChange(_this.selectData, data) } else { _this.selectData.forEach((item) => { if (item[_this.keyId] !== data[_this.keyId]) { item.selected = false // item.checked = false } else { // 控制当前选中的节点不可以取消选中 item.selected = true } }) _this.selectData = [] _this.selectData.push(data) } }, 200) } }, dblclick: () =>