前端VUE【实战】—— antd tree树形控件进行增删改查父子节点

具体的效果图如下:

直接上代码

vue组件

type=“primary”

style=“margin-left:20px”

icon=“plus”

@click=“onAdd”

:disabled=“disabled”

新增目录

{{ item.name }}

方法

data() {

return {

policiesAndRegulationss: []

}

},

methods: {

//列表查询 处理数据格式

getRecord() {

postDataToMng(this.url.list, { pageSize: 9999 }).then(res => {

if (res.errCode == 0) {

let data = JSON.parse(res.bizContent)

for (let index = 0; index < data.policiesAndRegulationss.length; index++) {

data.policiesAndRegulationss[index].scopedSlots = { title: ‘custom’ } //遍历一级添加插槽

//二级菜单名字改为children

data.policiesAndRegulationss[index].children = data.policiesAndRegulationss[index].policiesAndRegulationsAOList

//删除原 二级菜单

delete data.policiesAndRegulationss[index].policiesAndRegulationsAOList

for (let i = 0; i < data.policiesAndRegulationss[index].children.length; i++) {

data.policiesAndRegulationss[index].children[i].scopedSlots = { title: ‘custom’ } //遍历二级添加插槽

}

}

this.policiesAndRegulationss = data.policiesAndRegulationss

console.log(this.policiesAndRegulationss);

} else {

this.$message.error(res.errMsg)

}

})

}

}

使用插槽 插入增删改查的方法

二级list必须为children,添加插槽时需将一二级list的对象中插入scopedSlots对象。具体实现方法参考以上代码,使用for遍历插入。

slot=“custom”


scopedSlots:{

title:‘custom’

}

数据处理格式如下

policiesAndRegulationss : [

{

title: ‘0-0-0’,

key: ‘0-0-0’,

scopedSlots:{

title:‘custom’

文末

如果30岁以前,可以还不知道自己想去做什么的话,那30岁之后,真的觉得时间非常的宝贵,不能再浪费时间在一些碎片化的事情上,比如说看综艺,电视剧。一个人的黄金时间也就二,三十年,不能过得浑浑噩噩。所以花了基本上休息的时间,去不断的完善自己的知识体系,希望可以成为一个领域内的TOP。

同样是干到30岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript