最新前端VUE【实战】—— antd tree树形控件进行增删改查父子节点，前端音视频框架

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

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

具体的效果图如下：

直接上代码

vue组件

<a-input placeholder=“请输入目录名称” v-model=“addValue” @change=“inChange()” />

<a-button

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:{

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

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

0’,

key: ‘0-0-0’,

scopedSlots:{

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

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

[外链图片转存中…(img-iBFSIEp7-1715260667448)]