Iview组件库之树形控件增删改功能

最新推荐文章于 2022-08-27 10:06:47 发布

weixin_34220963

最新推荐文章于 2022-08-27 10:06:47 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c9cd35d5188251cdf2208d9

本文介绍如何使用Iview组件库中的树形控件，并通过自定义组件实现树节点的增加、编辑与删除功能。文中提供了具体的实现代码示例。

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

Iview组件库树形控件增删改

iview组件库中有个树组件tree，根据官方示例，通过自定义组件实现renderContent的效果，实现了树组件的增删改操作。

实现的效果

iview中tree示例

由iview官方文档我们可以知道，tree是有root、node、data组成。 root 是根节点 node:当前节点 data:当前节点的数据

让我们开始用代码实现它

tree Component基本

<Tree :data="treeData" :render="renderContent"

data是tree的一个props，用来生成tree的数据，类型是Array，默认值是[]。通过treeData给data赋值

render是tree的一个props，用来自定义渲染内容我们通过renderContent方法实现自定义的render效果

import TreeRender from './TreeRender'
export default {
name: 'Column',
components: {},
data () {
return {
 treeData: [],
  // 树结构
  treeList: null
}
复制代码

renderContent (h, {root, node, data}) {
  let that = this
  return h(TreeRenderRender, {
     props: {
      treeRoot: root,
      treeNode: node,
      treeData: data
    },
    on: {
      nodeAdd: (d) => that.handleAdd(d),
      nodeEdit: (r, n, d) => that.handleEdit(r, n, d),
      nodeDel: (r, n, d) => that.handleDelete(r, n, d),
      nodeAfterEdit: (r, n, d) => that.handleAfterEdit(r, n, d)
    }
  })
},
复制代码

nodeAdd是添加方法
nodeEdit是点击编辑后的方法
nodeAfterEdit是编辑后失去焦点的方法
nodeDel是删除的方法
复制代码

render基本组件

<span>
<span v-if="isEdit">
  <input size="small" v-model="treeData.title" autofocus
  @blur="nodeEditPass(treeRoot,treeNode,treeData)"/>
</span>
<template v-else>
<span>{{treeData.title}}</span>
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<span v-show="!isEdit">
  <Button type="info" size="small"  icon="md-add" @click="nodeAdd(treeData)">添加</Button>
  <Button type="primary" size="small" icon="md-create" @click="nodeEdit(treeRoot,treeNode,treeData)">修改</Button>
  <Button type="error" size="small" icon="md-close" @click="nodeDel(treeRoot,treeNode,treeData)">删除</Button>
</span>
</template>
</span>
复制代码

props: { // 树的根节点 treeRoot: { type: Array }, // 当前节点 treeNode: { type: Object }, // 当前节点的数据 treeData: { type: Object }

 nodeAdd (d) {
  this.$emit('nodeAdd', d)
},
nodeEdit (r, n, d) {
  this.isEdit = true
  d.isEdit = this.isEdit
  d.title = this.treeData.title
  this.$set(d, 'isEdit', d.isEdit)
  this.$set(d, 'title', d.title)
  this.$emit('nodeEdit', r, n, d)
},
nodeEditPass (r, n, d) { // 编辑完成
  this.isEdit = false
  d.isEdit = this.isEdit
  d.title = this.treeData.title
  this.$set(d, 'isEdit', d.isEdit)
  this.$set(d, 'title', d.title)
  this.$emit('nodeAfterEdit', r, n, d)
},
nodeDel (r, n, d) {
  this.$emit('nodeDel', r, n, d)
}

通过$emit的方式将增、改、删的操作抛给column组件
复制代码