Vue怎么实现增删改查功能

发布时间:2021-08-19 14:03:16 作者:chen
来源:亿速云 阅读:180

这篇文章主要介绍“Vue怎么实现增删改查功能”,在日常操作中,相信很多人在Vue怎么实现增删改查功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么实现增删改查功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

关于vue的树形展示 使用到项目:以树的形式异步展现
效果图先放:

Vue怎么实现增删改查功能

找到element-ui的官方文档,el-tree。(地址:https://element.eleme.cn/#/zh-CN/component/tree )

项目需求:以懒加载的形式展示,目录根据需求需要有新增 编辑 删除 操作以及操作后的刷新树结构

那我们现在开始吧

一、

Vue怎么实现增删改查功能

懒加载:Tree的懒加载,用一个属性控制:lazy。使用lazy,就要使用load来加载数据进行渲染树
原理:初始化触发load函数先加载初始数据,通过点击某个节点,触发load函数,来加载这个节点下的子节点。
优点:适合数据量比较大的时候,对部分节点刷新也比较友好

二、

Vue怎么实现增删改查功能

自定义节点:节点后添加操作按钮

Vue怎么实现增删改查功能
Vue怎么实现增删改查功能

简单例子官网上就有示例

**

主要讲讲更新节点

**
当对节点进行编辑、删除时,需要更新树,只需更新节点,不必更新全部的树即可。
原理:更新节点,其实更新的是该节点的子节点,不包括本节点。删除该节点的子节点,重新请求数据获取本节点的子节点数据进行重新渲染。

// refreshNode:要刷新的节点;newNodeData:新的子节点数据
refreshNode.splice(0, refreshNode.length);
refreshNode.doCreateChildren(newNodeData);

理解一下:
1>.方法node-click调用函数menuNodeClick,记录点击的节点信息,对节点操作前,必然先点击选中某个节点。此函数监听点击节点事件,只要点击了节点,就触发:

menuNodeClick(data, node, treeNode) {
    this.selectNodeData = data
    this.selectNode = node
}

2>.节点操作后刷新节点即可,通过不同场景可以选择刷新本节点(node)还是刷新本节点的父节点(node.parent):

/**
* 刷新节点数据
* @node [node/Object]: 刷新的节点node,刷新node以下的所有节点
* @type [String]: node的类型,'node'表示node是树的节点信息Node;'data'表示node是树节点信息中的data数据
*/
refreshTreeNode(node, type) {
    let refreshNode;
    // 拿到要更新节点的子节点
    if(type === 'node') {
        refreshNode = node.childNodes
    }else if(type === 'data') {
        let getNode = this.$refs.tree.getNode(node)
        refreshNode = getNode.childNodes
    }
    // 删除原有的子节点
    refreshNode.splice(0, refreshNode.length);
    //重新请求数据,更新节点
    this.requestTreeNode(node)
}

3.选择框checkBox:

如果懒加载中,有选择框,需要将有选择框的数据加载出来,然后通过属性default-checked-keys来勾选,通过default-expanded-keys设置展开的节点。

4.单选:
如果在懒加载中,有单选项,则设置选中即可:

// 设置当前节点选中
this.$refs.tree.setCurrentKey(
    this.selectNodeData[this.nodeKey]
)

不管是单选还是多选,在第一次加载时,后台要给的,不只是选中信息,还需要选中节点所在分支的所有节点信息,赋值给default-expanded-keys以便可使节点所在分支从上到选择项都展开。但往往,后台可能给的,只是选中值的信息,这就要前端自己封装数据,获取需要展开的分支信息。根据数据格式不同,用不同的方法
1)树形单层数据格式:

[
    {...},
    {...},
    {...}
]

这种格式的数据,【点击一层,加载一层】、【点击一层,加载该点击层的多层子节点】两种情况都可以满足。第一种不需要进行数据处理;第二种情况,需要在每条数据中注入一个字段,用来关联父子节点,然后将数据封装处理成el-tree所需要的格式,用一个递归函数整合数据(假设关联字段为parentId,nodeKey为id,树的子节点字段为children,需要加载id为'N'的多层子节点)(注:递归函数会影响性能,谨慎使用)

2).多层数据(假设子节点的属性名是children)

[
    {
        ...,
        children: [
            {
                ...,
                children: [
                    {
                        ...,
                        children: [...],
                    },
                    {
                        ...,
                        children: [...],
                    }
                ]
            },
            {
                ...,
                children: [
                    {
                        ...,
                        children: [...],
                    }
                ]
            }
        ]
    }
    
]

这种格式的数据,单层、多层都可以满足,不需要做处理。
选中值整合并展开选中值所在的树:多层数据可由后台给出选中节点所在的整个分支的值,赋给default-expanded-keys进行展开。也可以自己做筛选,写一个递归函数,将多层数据循环,找到选中值的节点的分支来设置展开(假设nodeKey为id,树的子节点字段为children,需要展开id为'N'的节点所在的整个分支)

懒加载示例:
HTML控件:

<el-tree
            :data="treeData"
            :props="defaultProps"
            :load="loadNodeTree"
            @node-click="handleNodeClick"
            lazy
            :expand-on-click-node="false"
             :default-expanded-keys="['1']"
            node-key="id"
            :highlight-current="true"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="treeLeft">{{ node.label }}</span>
              <span class="treeRight">
                <i
                  v-if="node.level === 1"
                  @click="() => appendNode(node, data)"
                  class="el-icon-plus"
                  
                ></i>
                <!--增加分组-->
                <!-- 根节点不需要删除和重命名 -->

                <i
                  v-if="data.id !== 0"
                  @click="() => deleteNode(node, data)"
                  class="el-icon-delete"
                  
                ></i>
                <!--删除分组-->

                <i
                  v-if="data.id !== 0"
                  @click="() => editNode(node, data)"
                  class="el-icon-edit"
                  
                ></i>
                <!--重命名分组-->
              </span>
            </span>
          </el-tree>

vue:
data里面定义变量

 // 树形菜单
      treeData: [], // 树节点
      defaultProps: { // 修改el-tree默认data数组参数
        children: 'children',
        label: 'name',
        id: 'id',
        parentId: 'parentId',
        isLeaf: 'leaf' // 指定节点是否为叶子节点,仅在指定了 lazy 属性的情况下生效
      },

methods:
加载树形菜单部分

 // 加载 树数据
    loadNodeTree(node, resolve) {
      const that = this
      if (node.level === 0) {
        that.loadtreeData(node, resolve)
      } else if (node.level === 1) {
        that.getChildByList(node, resolve)
      }
    },
    // 获取loadtreeData 就是父节点数据,getChildByList就是异步获取子节点数据
    loadtreeData(nodeData, resolve) {
      const dataType = {
        pageIndex: 1,
        pageSize: 100000
      }
      getAlltype(dataType)
        .then(res => {
          const rootChildren = []
          if (res.code === 200) {
            const data = res.data.list
            data.map(item => {
              rootChildren.push({
                name: item.typeName,
                parentId: '',
                id: item.id,
                leaf: false,
                children: []
              })
            })
            //如果resolve有内容就是懒加载走查询 否则走的是修改
            if (resolve) {
              resolve(rootChildren)
            } else {
              nodeData.childNodes = []
              nodeData.doCreateChildren(rootChildren)
            }
          } else {
            resolve([])
          }
        })
    },
    // 获取子节点请求
    getChildByList(nodeData, resolve) {
      var _parentID = nodeData.data.id
      const typeSpec = {
        typeId: _parentID,
        pageIndex: 1,
        pageSize: 100000
      }
      getAlltypeSpec(typeSpec).then(res => {
        const rootChildren = []
        if (res.code === 200) {
          const data = res.data.list
          data.map(item => {
            rootChildren.push({
              name: item.description,
              parentId: item.typeId,
              id: item.id,
              leaf: true,
              children: []
            })
          })
          if (resolve) {
            resolve(rootChildren)
          } else {
            nodeData.childNodes = []
            nodeData.doCreateChildren(rootChildren)
          }
        } else {
          return false
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 节点点击事件
    handleNodeClick(data, node) {
      this.addnode = node
      this.adddata = data
      if (node.level === 1) {
        this.queryForm.typeId = node.data.id
        this.queryForm.typeSpecId = ''
      } else if (node.level === 2) {
        this.queryForm.typeId = node.data.parentId
        this.queryForm.typeSpecId = node.data.id
      }
      this.query()
    },

节点操作:增加节点 修改节点 删除节点 (操作自己节点要传父节点信息才能找到自己当前节点,操作子节点就传当前节点 结论:父节点操作子节点)

 // 树节点增加 类型规格
    appendNode(node, data) {
      this.addTypesSpec = {
        typeName: node.data.name,
        typeId: node.data.id
      }
      this.createTypesSpecDialog = true
    },
    // 树类型修改
    editNode(node, data) {
      const typeId = node.data.parentId
      // 一级 类型
      if (node.level === 1) {
        this.editTypesDialog = true
        this.editTypes = {
          id: node.data.id,
          typeName: node.data.name
        }
      } else {
        this.editTypesSpecDialog = true
        this.getSelectTypes()
        // this.editTypesSpec = Object.assign({}, node.data)
        this.editTypesSpec = {
          typeId: typeId,
          id: node.data.id,
          description: node.data.name
        }
      }
    },

    // 树类型删除
    deleteNode(node, data) {
      // 一级 类型
      if (node.level === 1) {
        this.$msgbox.confirm('此操作将删除资产类型数据, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          typeDel(node.data.id).then(
            resp => {
              this.$message('删除成功')
              this.query()
              this.loadNodeTree(node.parent)
            },
            err => {
              console.log('err', err)
            }
          )
        }).catch(() => {
          this.$message.error('已取消')
        })
      } else {
        this.$msgbox.confirm('此操作将删除资产类型规格数据, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          typeSpecDel(node.data.id).then(
            resp => {
              this.loadNodeTree(node.parent)
              this.$message('删除成功')
              this.query()
            },
            err => {
              console.log('err', err)
            }
          )
        }).catch(() => {
          this.$message.error('已取消')
        })
      }
    },

节点触发之后显示弹框 走正常的弹框增加修改删除操作,只不过在提交后台请求返回操作成功之后需要再一次加载树形结构 所以在这里再一次调用加载树形方法,传的node 当触发点击树形的时候可以保存一下,我的是handleNodeClick这个方法 不管点击修改 增加还是删除都保存下点击的node

 this.$message('编辑成功')
              this.loadNodeTree(this.addnode.parent)

1.设置展开和收缩

if (!node.expanded) {
    node.expand();
}else {
    node.collapse();
}

2.获取父节点

node.parent

到此,关于“Vue怎么实现增删改查功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. vue如何实现弹幕功能
  2. vue如何实现表格增删改查效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:Python爬虫常用库有哪些

下一篇:Python常用模块有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》