蝙蝠岛资源网 Design By www.hbtsch.com
最近在根据需求,需要用到树形控件,ele 的封装了树形控件正好拿来用,用的途中遇到一些问题就总结下,哈哈哈
说正事,我需要动态的加载出整个树形结构,刚好就有
符合需求,啦啦啦
用的时候出现问题了,我要如何把后台返回个我的数据加载到表里呢,上菜。。。
<template> <el-tree empty-text="暂无数据" :expand-on-click-node="false" :props="defaultProps" :load="loadNode" node-key="id" lazy> <div class="custom-tree-node" slot-scope="{ node, data }"> <div class="fl"><i class="el-icon-menu"></i>{{ node.label }}</div> <div class="fr"> <el-button type="primary" size="mini" @click="() => addDialogShow(node, data, 0)"> 新增 </el-button> <el-button type="primary" plain size="mini" @click="() => addDialogShow(node, data, 1)"> 更新 </el-button> <!-- <el-button disabled type="danger" size="mini" @click="() => remove(node, data)"> 删除 </el-button> --> </div> </div> </el-tree> </template>
el-tree 标准样式了
部分
<script> import { typeList, addtype, updatetype, deltype } from '@/api/baseType' export default { data() { return { defaultProps: { id: "Id", label: 'Name', children: 'children' }, //新增相关 addDialog:false, addForm: {}, addRules:{ name:[{required: true,message: '请输入基础类型名',trigger: 'blur'}] }, pid: null, // 基础类型得父级id flag: null, //操作标志位 node: {}, // tree 节点对象 nodedata: {} } }, created(){ }, methods: { // 加载树结点 loadNode(node, resolve) { // 如果是顶级的父节点 if (node.level === 0) { // 查找顶级对象 typeList(node.level).then(res => { if (res.Data) { return resolve(res.Data) } else { this.$message.error(res.Msg) } }).catch(() => { let data = [] return resolve(data) }) } else { // 根据父节点id找寻下一级的所有节点 typeList(node.data.Id).then(res => { if (res.Data) { return resolve(res.Data) } else { this.$message.error(res.Msg) } }).catch(() => { let data = [] return resolve(data) }) } }, remove(node, data) { console.log(node, data) // const parent = node.parent; // const children = parent.data.children || parent.data; // const index = children.findIndex(d => d.id === data.id); // children.splice(index, 1); }, //新增 addDialogShow(node,data,flag) { this.node = node // this.nodedata = data if(flag === 0) { this.addDialog = true this.pid = data.Id this.flag = 0 } if(flag === 1) { this.addDialog = true this.pid = data.Id this.addForm.name = data.Name this.flag = 1 } }, addSubmit(flag) { this.$refs.addForm.validate((valid) => { if(valid){ this.listLoading = true let arr = Object.assign({}, this.addForm) console.log(flag) if(flag === 0) { let data = { pid: this.pid, name: arr.name } // 新增 api addtype(data).then(() => { typeList(data.pid).then(res => { let id = res.Data[0].Id const newChild = { id: id, label: arr.name, children: [] }; if (!this.nodedata.children) { this.$set(nodedata, 'children', []); } this.nodedata.children.push(newChild) this.addDialog = false this.$notify.success({ message:'新增成功', duration: 2000 }) }) }).catch(() => { this.addDialog = false }) } if(flag === 1) { let data = { name: arr.name } updatetype(this.pid,data).then(res => { this.$set(this.node.data, 'Name',arr.name) this.addDialog = false this.$notify.success({ message:'更新成功', duration: 2000 }) }).catch(() => { this.addDialog = false }) } } }) } } } </script>
动态的加载树形数据 这里通过对ele 提供的方法
这里对 el-tree 的样式做了些许的改变
这个看个人需要了
<style lang="less" scoped> .el-tree-node__content { line-height: 50px; .custom-tree-node { width: 100%; display: block; .fl { float: left; line-height: 31px; } .fr { float: right; margin-right: 50px; } } } </style>
动态加载节点数据,这里通过 ele 提供的 loadNode() 方法 可以根据个人需要改写
这里我是用弹出框进行信息的管理
实现动态的后台数据更新 和 前台显示的刷新,
addDialogShow(node,data,flag) { this.node = node // 这里对nodetree 进行了预先存储 this.nodedata = data }
然后 在更行后台api 成功后 通过 Vue.$set() 刷新子节点数据
let arr = Object.assign({}, this.addForm) //获取输入框输入的数据 updatetype(this.pid,data).then(res => { this.$set(this.node.data, 'Name',arr.name) //同步刷新 this.addDialog = false this.$notify.success({ message:'更新成功', duration: 2000 }) }).catch(() => { this.addDialog = false }) }
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无element el-tree组件的动态加载、新增、更新节点的实现的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年12月24日
2024年12月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]