-
可以增加父子节点
-
可以删除子节点
-
可以编辑子节点信息
-
可以取消编辑信息
具体的效果图如下：
直接上代码
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:{
title:‘custom’
}
children: [
{
title: ‘0-0-0-0’,
key: ‘0-0-0-0’,
scopedSlots:{
title:‘custom’
}
},
],
},
{
title: ‘0-0-1’,
key: ‘0-0-1’,
scopedSlots:{
title:‘custom’
}
children: [
{
title: ‘0-0-1-0’,
key: ‘0-0-1-0’,
scopedSlots:{
title:‘custom’
}
},
],
},
],
基础学习：
前端最基础的就是 HTML , CSS 和 JavaScript 。
网页设计：HTML和CSS基础知识的学习
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
动态交互：JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
链图片转存中…(img-X5V5KfmE-1718568946213)]
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
[外链图片转存中…(img-msSoIlXC-1718568946213)]
动态交互：JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
扫一扫
3084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
