使用iview实现树的增删改

已于 2022-08-12 14:07:43 修改
阅读量532 收藏
点赞数
分类专栏： vue iview 文章标签： vue iview
于 2022-08-11 16:53:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46264882/article/details/126288835
版权
vue 同时被 2 个专栏收录
16 篇文章 1 订阅
订阅专栏
iview
1 篇文章 0 订阅
订阅专栏

先上代码

<template>
  <div>
    <template v-slot:content>
      <Tree :data="data5" :render="renderContent"></Tree>
    </template>
    <template v-slot:footer></template>
  </div>
</template>

<script>

export default {
  name: 'drawer-oepn-menu',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editState: false,
      data5: [
        {
          id: null,
          title: '全部',
          expand: true,
          // eslint-disable-next-line no-unused-vars
          render: (h, { root, node, data }) => {
            return h('span', {
              style: {
                display: 'inline-block',
                width: '100%'
              }
            }, [
              h('span', [
                h( "span", data.title)
              ]) 
            ]);
          },
          children: [
            {
              id: 1,
              title: '子',
              expand: true
            },
            {
              id: 2,
              title: '子2',
              expand: true
            }
          ]
        }
      ],
      buttonProps: {
        type: 'default',
        size: 'small'
      },
      // 输入框要修改的内容
      inputContent: "",
      // 修改前的TreeNode名称
      oldName: ""
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    // 树渲染逻辑
    renderContent(h, { root, node, data }) {
      return h("span", {
        class: "menu-tree",
        style: {
          display: 'inline-block',
          lineHeight: '1.6rem',
          width: '100%',
          cursor: 'pointer'
        },
        on: {
          click: () => {
            // 点击Tree节点触发
            data.editState ? '' : this.handleClickTreeNode(data)
          }
        }
      }, [
        h('span', [
          h(`${data.editState ? '' : 'span'}`, data.title),
          // 使用this.$createElement创建的节点可以获取到$ref,避免使用h无法获取到的bug
          this.$createElement(`${data.editState ? 'Input' : ''}`,
            {
              attrs: {
                value: `${data.editState ? data.title : ''}`,
                autofocus: true
              },
              ref: 'slotTreeInput' + data.id,
              style: {
                width: '12rem',
                cursor: 'auto'
              },
              on: {
                'on-change': (event) => {
                  this.inputContent = event.target.value
                },
                'on-blur': () => {
                  this.confirmTheChange(data)
                },
                // eslint-disable-next-line no-undef
                'on-enter': (event) => {
                  event.target.blur()
                }
              }
            }
          )
        ]),
        // 增删改按钮部分
        h(`${data.editState ? '' : 'span'}`,
          {
            class: "btnNone",
            style: { marginLeft: '1rem' }
          },
          [
            //操作按钮部分 
            // 编辑按钮
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'ios-brush-outline'
              }),
              style: {
                marginRight: '8px',
                borderRadius: '50%',
                width: '1.5rem',
                lineHeight: '0',
                padding: '0',
                height: '1.4rem'
              },
              on: {
                click: () => { this.editTree(data) }
              }
            }),
            // 添加按钮
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'ios-add'
              }),
              style: {
                marginRight: '8px',
                borderRadius: '50%',
                width: '1.5rem',
                lineHeight: '0',
                padding: '0',
                height: '1.4rem'
              },
              on: {
                click: () => { this.append(data) }
              }
            }),
            // 删除按钮
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'ios-remove'
              }),
              style: {
                marginRight: '8px',
                borderRadius: '50%',
                width: '1.5rem',
                padding: '0',
                lineHeight: '0',
                height: '1.4rem'
              },
              on: {
                click: () => { this.remove(root, node, data) }
              }
            })
          ]
        ),
        // 确认/取消修改部分
        h(`${data.editState ? 'span' : ''}`,
          {
            style: {
              marginLeft: '.5rem'
            }
          },
          [
            // 确认按钮
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'md-checkmark'
              }),
              style: {
                // marginRight: '8px',
                border: 0,
                background: 'rgba(0,0,0,0)',
                fontSize: '1.3rem',
                outline: "none"
              },
              on: {
                click: () => {
                  this.confirmTheChange(data)
                }
              }
            }),
            // 取消按钮
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'md-close'
              }),
              style: {
                border: '0',
                background: 'rgba(0,0,0,0)',
                fontSize: '1.3rem',
                outline: "none"
              },
              on: {
                click: () => { this.CancelChange(data) }
              }
            })
          ]
        )
      ]);
    },
    // 控制Tree当前状态函数
    setStates(data) {
      var editState = data.editState
      if (editState) {
        this.$set(data, 'editState', false);
      } else {
        this.$set(data, 'editState', true);
        this.$nextTick(() => {
          if (this.$refs['slotTreeInput' + data.id]) {
            this.$refs['slotTreeInput' + data.id].focus()
          }
        }) 
      }
    },
    // Tree修改按钮
    editTree(data) {
      event.stopPropagation()
      this.inputContent = data.title
      this.oldName = data.title
      this.setStates(data)
    },
    // 添加按钮
    append(data) {
      event.stopPropagation()
      const children = data.children || [];
      children.push({
        title: '新建节点',
        expand: true
      });
      this.$set(data, 'children', children);
    },
    // 删除按钮
    remove(root, node, data) {
      event.stopPropagation()

      this.$Modal.confirm({
        title: "提示",
        content: `您确定删除 “${data.title}” 吗？`,
        onOk: () => {
          const parentKey = root.find(el => el === node).parent;
          const parent = root.find(el => el.nodeKey === parentKey).node;
          const index = parent.children.indexOf(data);
          parent.children.splice(index, 1);
          this.$Message.info('删除成功');
        },
        onCancel: () => {
          this.$Message.info('取消');
        }
      });


    },
    // 确认修改树节点
    confirmTheChange(data) {
      if (!this.inputContent) {
        this.$Notice.warning({
          title: '当前输入有误'
        });
      } else {
        data.title = this.inputContent
        this.setStates(data);
      }

    },
    // 取消修改树节点
    CancelChange(data) {
      this.$Notice.info({
        title: '取消修改'
      });
      this.setStates(data)
    },
    // 点击Tree节点触发
    handleClickTreeNode(data) {
      console.log("当前点击》》" + data.title)
    }
  }
}
</script>

<style  >
.IviewTree{
    width: 300px;
    text-align: left;
    margin: 0 auto;
}
.btnNone{
    display:none
}
/* .menu-tree:hover{color:aqua} */
.menu-tree:hover .btnNone{
   display: inline-block
}

.menu-tree:hover {
   font-weight: 600;
   color:#275cd4
}
.ivu-tree ul li {
    list-style: none;
    /* margin: 8px 0; */
    padding: 0;
    white-space: nowrap;
    outline: none;
}
</style>

最终所需要的效果图

<template>
  <div>
    <template v-slot:content>
      <Button @click="append" v-if="data5[0].children.length < 29">添加</Button>
      <Tree :data="data5" :render="renderContent"></Tree>
    </template>
    <template v-slot:footer></template>
  </div>
</template>

<script>

export default {
  name: 'drawer-oepn-menu',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editState: false,
      NODE_ID_START: 100,
      startId: null,
      data5: [
        {
          id: null,
          title: '全部',
          expand: true,
          // eslint-disable-next-line no-unused-vars
          render: (h, { root, node, data }) => {
            return h('span', {
              style: {
                display: 'inline-block',
                width: '100%'
              }
            }, [
              h('span', [
                h( "span", data.title)
              ]) 
            ]);
          },
          children: [
            {
              id: null,
              title: 'default',
              expand: true
            }
          ]
        }
      ],
      buttonProps: {
        type: 'default',
        size: 'small'
      },
      // 输入框要修改的内容
      inputContent: "",
      // 修改前的TreeNode名称
      oldName: ""
    }
  },
  watch: {
    show (val) {
      if (!val) { return }
      this.startId = this.NODE_ID_START
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    // 树渲染逻辑
    renderContent(h, { root, node, data }) {
      return h("span", {
        class: "menu-tree",
        style: {
          display: 'flex',
          lineHeight: '1.6rem',
          width: '100%',
          cursor: 'pointer',
          'min-width': '100px',
          'min-height': '20px',
          'justify-content': 'space-between'
        },
        on: {
          click: () => {
            // 点击Tree节点触发
            this.handleClickTreeNode(data)
          }
        }
      }, [
        h('span', [
          h(`${data.editState ? '' : 'span'}`, data.title),
          // 使用this.$createElement创建的节点可以获取到$ref,避免使用h无法获取到的bug
          this.$createElement(`${data.editState ? 'Input' : ''}`,
            {
              'class': {
                'err-input': data.title.length < 2 || data.title.length > 15
              },
              attrs: {
                value: `${data.editState ? data.title : ''}`,
                autofocus: true,
                placeholder: this.$t('2~15位字符')
              },
              ref: 'slotTreeInput' + data.id,
              style: {
                width: '12rem',
                cursor: 'auto'
              },
              on: {
                'on-change': (event) => {
                  this.handleInputChange(event, data)
                },
                'on-blur': () => {
                  this.confirmTheChange(data)
                },
                // eslint-disable-next-line no-undef
                'on-enter': (event) => {
                  event.target.blur()
                }
              }
            }
          )
        ]),
        // default教室只允许编辑
        h(`${!data.editState && data.id === null ? 'span' : ''}`, {
          class: "btnNone",
          style: { marginLeft: '1px' }
        }, [
          //操作按钮部分 
          // 编辑按钮
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-brush-outline'
            }),
            style: {
              marginRight: '8px',
              borderRadius: '50%',
              width: '1.5rem',
              lineHeight: '0',
              padding: '0',
              height: '1.4rem'
            },
            on: {
              click: () => { this.editTree(data) }
            }
          })
        ]),
        // 增删改按钮部分

        h(`${!data.editState && data.id !== null ? 'span' : ''}`, {
          class: "btnNone",
          style: { marginLeft: '1rem' }
        }, [
          //操作按钮部分 
          // 编辑按钮
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-brush-outline'
            }),
            style: {
              marginRight: '8px',
              borderRadius: '50%',
              width: '1.5rem',
              lineHeight: '0',
              padding: '0',
              height: '1.4rem'
            },
            on: {
              click: () => { this.editTree(data) }
            }
          }),
          // 删除按钮
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-remove'
            }),
            style: {
              marginRight: '8px',
              borderRadius: '50%',
              width: '1.5rem',
              padding: '0',
              lineHeight: '0',
              height: '1.4rem'
            },
            on: {
              click: () => { this.remove(root, node, data) }
            }
          })
        ])
      ]);
    },
    // 控制Tree当前状态函数
    setStates(data) {
      var editState = data.editState
      if (editState) {
        this.$set(data, 'editState', false);
      } else {
        this.$set(data, 'editState', true);
        this.$nextTick(() => {
          if (this.$refs['slotTreeInput' + data.id]) {
            this.$refs['slotTreeInput' + data.id].focus()
          }
        }) 
      }
    },
    // Tree修改按钮
    editTree(data) {
      event.stopPropagation()
      this.inputContent = data.title
      this.oldName = data.title
      this.setStates(data)
    },
    // 添加按钮
    append() {
      event.stopPropagation()
      this.oldName = ''
      let children = this.data5[0].children
      let data = {
        title: '',
        id: ++this.startId,
        expand: true
      }
      children.push(data);
      this.setStates(data)
      // this.$set(data, 'children', children);
    },
    // 删除按钮
    remove(root, node, data) {
      event.stopPropagation()
      this.$Modal.confirm({
        content: `确定删除目录吗，如果改目录下有开放的模板，则该目录下的所有模板将移入${this.data5[0].children[0].title}目录`,
        loading: true,
        onOk: () => {
          setTimeout(() => {
            const parentKey = root.find(el => el === node).parent;
            const parent = root.find(el => el.nodeKey === parentKey).node;
            const index = parent.children.indexOf(data);
            parent.children.splice(index, 1);
            this.$Modal.remove();
          }, 1000);
        }
      });
    },
    // 确认修改树节点
    confirmTheChange(data) {
      console.log(this.oldName)
      if (this.inputContent.length > 15 || (this.inputContent.length > 0 && this.inputContent.length < 2)) { return }
      let arr = this.data5[0].children.map(item => item.title)
      if (arr.findIndex(x => x === this.inputContent) !== -1 && this.inputContent !== this.oldName) {
        return this.$Notice.open({
          title: '目录已存在',
          desc: '',
          duration: 0
        });
      }
      if (!this.inputContent && this.oldName.length === 0) {
        this.data5[0].children.splice(this.data5[0].children.findIndex(x => x.title === ''), 1)
      } else if (!this.inputContent && this.oldName) {
        return
      } else {
        data.title = this.inputContent
        this.setStates(data);
      }
      this.inputContent = ''
      this.oldName = ''
    },
    // 点击Tree节点触发
    handleClickTreeNode(data) {
      console.log("当前点击》》" + data.title)
      this.oldName = data.title
    },
    handleInputChange(e, data) {
      console.log(data.title)
      this.inputContent = event.target.value.replace(/\s*/g, "")
      if (this.inputContent.length < 2 || this.inputContent.length > 15) {
        event.target.classList.add('err-input') 
      } else {
        event.target.classList.remove('err-input')
      }
    }
  }
}
</script>

<style>
.IviewTree{
    width: 300px;
    text-align: left;
    margin: 0 auto;
}
.btnNone{
    display:none
}
/* .menu-tree:hover{color:aqua} */
.menu-tree:hover .btnNone{
   display: inline-block
}

.menu-tree:hover {
   font-weight: 600;
   color:#275cd4
}
.ivu-tree ul li {
    list-style: none;
    /* margin: 8px 0; */
    padding: 0;
    white-space: nowrap;
    outline: none;
}

.err-input.ivu-input  {
  border: 1px solid red;
}
</style>
37 degrees Celsius
关注
专栏目录
iview 实现 tree
qq_34103387的博客
11-05 519
文档地址: http://v1.iviewui.com/components/tree 2.代码实现 show-checkbox:允许展示选择框 <Tree ref="tree" :data="permissions" show-checkbox></Tree> 实现: async getResource () { let res = JSON.parse(JSON.stringify(this.allResource)) ..
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Iview组件库之树形控件增删改功能
weixin_34220963的博客
03-28 2445
Iview组件库树形控件增删改 iview组件库中有个树组件tree，根据官方示例，通过自定义组件实现renderContent的效果，实现了树组件的增删改操作。 实现的效果 iview中tree示例 由iview官方文档我们可以知道，tree是有root、node、data组成。 root 是根节点 node:当前节点 data:当前节点的数据 让我们开始用代码实现它 tree Compon...
iView-admin树形组件。使用render生成Tree（树形组件）。优化样式及功能，增删改功能
lys20000913的博客
09-19 4214
iView-admin中使用render函数生成Tree。优化样式及添加增删改功能 先看效果图 下面附上代码 <template> <div> <Tree :data="data5" :render="renderContent"></Tree> <!-- 添加/修改树节点 --> ...
iView树形组件：增删改节点
全易
09-22 4616
转发自https://blog.csdn.net/lys20000913/article/details/101011771?utm_source=app <template> <div class="IviewTree"> <Tree :data="data5" :render="renderContent"></Tree&g...
iview的tree组件扩展，输入框可编辑，删除
qq_41444226的博客
08-18 878
iview组件tree扩展，支持树节点输入和修改，删除，重命名等
详解Vue.js iview实现树形权限表（可扩展表）
10-17
在本文中，我们将深入探讨如何使用Vue.js框架和iView组件库来实现一个可扩展的树形权限表。这个功能对于权限管理系统来说至关重要，因为它能够清晰地展示不同用户或角色的权限结构。以下是对实现这一功能的具体步骤...
基于vue、iview实现tree组件可拖拽、双击编辑
09-23
在使用IView的`Tree`组件时，你需要定义好数据结构，一般包含节点ID、父节点ID、节点文本等属性。为了支持拖拽，还需要添加额外的字段来记录拖动状态，例如拖动源节点ID和目标节点ID。 为了实现以上功能，你需要对...
iview实现select tree树形下拉框的示例代码
10-17
下面我们将详细探讨如何使用 IView 实现 Select Tree，并通过示例代码进行讲解。 首先，要在页面中使用 Tree 组件和 Select 组件，你需要在项目中引入 IView。这通常通过 npm 或 yarn 安装完成： ```bash npm ...
React Ant Design树形表格的复杂增删改操作
01-18
最近因为业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑，很多功能antd只写了初步的功能，更为细化的功能只能自己完善。踩过的坑都写在了这里。 树形表格的显示 在antd中对于...
iview 树形加工类
10-16
iview 树形加工类,后台查询list数据，前台加工成iview所需要的树形结构
iview中tree树形组件使用介绍(个人总结)
机敏的皮皮虾的博客
10-22 5939
iview中tree树形组件使用介绍 最近有用到tree,被官网简单的描述折磨得有点小难受，后小有所得，在此和大家分享，希望大佬们不吝指教。 先贴官方的代码,，简单看一下 <template> <Tree :data="data5" :render="renderContent" class="demo-tree-render"></Tree> </template> <script> export default { data() {
IView完成增删改功能
AIfurture的博客
07-25 881
先看效果吧： 数据库字段： 前端页面： 添加form表单： 编辑form表单： 详情： 其中编辑和详情页都已做了form表单的回显数据 <template> <div class="demo"> <div slot="zhengqing"> <Input v-model="zqListQuery.username" p...
构造iview Tree结构
chouya8141的博客
04-14 413
工程目录和类结构： 1.Book.java 测试model，包含id和父id还有name。 package com.dlmu.sei; /** * * @author zhangtuo * @Date 2017/4/14 */ public class Book { ...
iview tree 实现单选功能、 iview tree 单选功能实现、iview tree 多选变单选、iview Tree树形控件、 iview tree趟坑指北！
H舞
08-27 6478
仅以此文 纪念我无声的三周年司龄 以及2019年8月 姿美堂709的封闭开发时光！！！ 每年的八月份都是我司封闭开发的 大（ku）好（bi）时光，今年封闭开发带着我的小团队用iview-admin2重新构建了app后台管理系统 期间产品需求有树形控件 - 单选 需求，旧后台用的zTree 自带此功能 无需多说，换成iview居然没有单选，只有多选 百度之~ 恩 要是一下就查到解决方案...
通过iview组件库渲染树形结构tree
热门推荐
weixin_55894946的博客
11-24 3万+
来完成，但是需求有可能要实现的功能不一样，我本次开发的需求不仅是渲染出树形的组织结构，还要有相应的。引用这三步之后，只需要把里面的功能做出改动以及下拉菜单的点击事件做出改动即可。在很多后台管理项目中，我们都会遇到要开发与。相关的需求，此时我们基本都要用到。
iView使用tree和回显
qq_34631220的博客
05-07 1762
<Tree :data="data" ref="tree" show-checkbox multiple></Tree> getCheckedNodes 获取被勾选的节点 getSelectedNodes 获取被选中的节点 getCheckedAndIndeterminateNodes 获取选中及半选节点 console.log(this.$refs.tree.getCheckedAndIndeterminateNodes()) ...
iview填坑之Tree树型组件
旋转 跳跃 然后 团灭
07-02 6415
<Tree ref="tree" :data="treeContents" :render="renderContent"></Tree> 1. 先来说说数据 iview的Tree组件的data数据是树结构的，例如下面代码所示： export default { data () { return { ...
iview自定义Tree组件内容
第二庄
11-20 2万+
介绍 使用iview框架进行开发的话，一般都有展示树形结构数据的需求。那么就用的到其中的Tree组件了。但是其基本架构是满足不了我们的需求的，基本架构如下： 一般来说一条数据肯定不止展示它的title属性，我们的需求是展示多个属性，并且含有多个操作按钮，具体如下： 这其中得用到 Render 函数来自定义节点显示内容和交互。 下面就介绍一下Tree组件如何自定义节点内容。 自定义节点内容 先把...
iview 实现的地区选择器
最新发布
10-11
iView是一种基于Vue.js框架...通过使用iView的地区选择器组件，我们可以方便地实现一个地区选择功能，用户可以通过选择器来选择所在的地区，获取选择的地区信息后进行后续的操作和处理，从而提升用户体验和开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值