您好,登录后才能下订单哦!
这篇文章主要介绍“Vue怎么实现增删改查功能”,在日常操作中,相信很多人在Vue怎么实现增删改查功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么实现增删改查功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
关于vue的树形展示 使用到项目:以树的形式异步展现
效果图先放:
找到element-ui的官方文档,el-tree。(地址:https://element.eleme.cn/#/zh-CN/component/tree )
项目需求:以懒加载的形式展示,目录根据需求需要有新增 编辑 删除 操作以及操作后的刷新树结构
那我们现在开始吧
懒加载:Tree的懒加载,用一个属性控制:lazy。使用lazy,就要使用load来加载数据进行渲染树
原理:初始化触发load函数先加载初始数据,通过点击某个节点,触发load函数,来加载这个节点下的子节点。
优点:适合数据量比较大的时候,对部分节点刷新也比较友好
自定义节点:节点后添加操作按钮
简单例子官网上就有示例
**
主要讲讲更新节点
**
当对节点进行编辑、删除时,需要更新树,只需更新节点,不必更新全部的树即可。
原理:更新节点,其实更新的是该节点的子节点,不包括本节点。删除该节点的子节点,重新请求数据获取本节点的子节点数据进行重新渲染。
// 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怎么实现增删改查功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。