vue树形结构展示,vue树形列表
其实很多公司都会有类似于用户权限树的增删查功能。主要介绍vue的树形结构来添加、删除、检查，有一定的参考价值，感兴趣的朋友可以参考一下。
其实很多公司都有类似用户权限树的增删查功能。就在最近，我刚刚写了一个增删查的树形结构。在这里想和大家分享一下。如有不合理之处，欢迎评论，我会尽快优化~ ~请先附上效果图。
但是在没有点击编辑的时候，产品的要求是选择一个节点，获取该节点对应的设备数据，所以初始页面是这样的。
这是“编辑”按钮，在单击“编辑”后显示节点。
单击顶部的添加按钮，显示最外层父节点的添加屏幕。
修改节点名称
因为我们的需求是编辑和非编辑，所以我使用了两个树组件，由v-if控制。(v-if:该组件不存在，v-show:该组件占用空间，但不显示)
el树
v-if=treeSetData.editFlg
ref=tree
:key=treeSetData.tree_key
:data=treeSetData.treeData
node-key=id
:render-content=renderContent
:expand-on-click-node=false
:default-expand-all= treesetdata . default expandall
突出显示-当前
@node-click=handleNodeClick
class=树样式
/el-tree
el树
v-否则
ref=tree
:key=treeSetData.tree_key
:data=treeSetData.treeData
node-key=id
:render-content=renderContent
:expand-on-click-node=false
:default-expand-all= treesetdata . default expandall
突出显示-当前
class=树样式
/el-tree
我不会详细讨论树组件的字段描述。可以通过element-ui的树形组件官网查看，但下面的方法我会单独说明。
Render-content:自定义节点内容，renderContent:是方法名。
@node-click:单击节点时调用。因为节点点击效果只存在于非编辑状态，所以我只在非编辑树组件中写了这个方法。
必需的数据描述
//树形结构需要的数据
treeSetData:{
DefaultExpandAll:true，//是否默认展开？
EditFlg:true，//是否处于编辑状态？
TreeData: []，//树组件数据集
//编辑树数组的内容
编辑列表：[]，
//删除树形数据数组的内容
删除列表：[]，
//添加树数据数组的内容
添加列表：[]，
//添加flg？
addNodeFlg:false，
//默认id
默认Id:5000，
//新添加的最外层节点的名称
新名称：，
tree_key: 0，
},
解释添加最外层节点的方法。其实主要的核心思想是控制下面的输入框和按钮的显示，然后点击确定按钮，在原来的树形构件数据中增加一条数据。
实现图
添加的按钮的Html代码
El-button type= text @ click= add _ new _ area class= button-style I class= El-icon-plus style= margin-right:5px /I add/El-button
添加按钮点击方法[add_new_Area]
add_new_Area() {
this . treesetdata . addnodeflg=true；
},
文本框的代码段
El-row class= add _ question v-show= treesetdata . addnodeflg
El-col:span= 11 style= margin:0px 5px
El-input v-model= treesetdata . newname placeholder= traffic area size= mini /El-input
/el-col
el-col :span=12
El-button size= mini type= primary plain @ click . stop= add _ area _ sure OK/El-button
El-button size= mini type= warning plain @ click . stop= add _ area _ cancel cancel/El-button
/el-col
/el-row
确认按钮[添加区域确定]
add_area_sure() {
//添加节点数据，因为是顶层，所以默认父id是pid。如果ID为，则是我最初设置的[defaultId]的自加。您可以只在数据中添加[defaultId]字段。
const nodeObj={
id: this.treeSetData.defaultId，
名称：this.treeSetData.newName，
isEdit:假的，
孩子：[],
pid:0
};
这个。treesetdata。treedata。push(节点obj)；
这个。treesetdata。addnodeflg=false
这个。treesetdata。添加列表。push(节点obj)；
},
取消按钮【添加_区域_取消】
add_area_cancel() {
这个。treesetdata。addnodeflg=false
这个。treesetdata。newname=
},
至此就可以实现最外层节点的添加了。
编辑状态下的几点增删改的话，其实就是通过自定义节点内容的【渲染内容】这个方法实现的，快下班了我就不一一说明了，有时间再补吧，先把主要代码提出来~
//通行区域树操作组节点，
renderContent(h，{节点，数据，存储}) {
如果(这个。treesetdata。edit flg==false){
返回（
span class=tree-span
span { this。显示或编辑(数据)}/span
div class=树节点操作
我点击了一下。node edit(ev，store，data)} style= padding-left:10px；/i
我在点击的时候={()=这个.nodeadd(node，data)} style= margin-left:5px；/i
我在点击时删除。node delete(node，data)} style= margin-left:5px；/i
/div
/span
);
}否则{
返回（
span class=tree-span
span { this。显示或编辑(数据)}/span
div class=树节点操作
/div
/span
);
}
},
//节点编辑
showOrEdit(数据){
if (data.isEdit) {
返回（
埃尔输入
type=text
value={data.name}
on-blur={ev=this.edit_sure(ev，data)}
size=mini
class=输入样式
/el-input
);
}否则{
返回span class name= node _ labe"{ data。name } "/span；
}
},
节点编辑(ev，存储，数据){
data.isEdit=true
这个. nextTick(()={
const $input=
伊芙。目标。父节点。父节点。查询选择器( input )
伊芙。目标。父元素。父元素。查询选择器(“输入”)；
！$input？$ input。焦点()；
});
},
//确认编辑
edit_sure(ev，data) {
const $input=
伊芙。目标。父节点。父节点。查询选择器( input )
伊芙。目标。父元素。父元素。查询选择器(“输入”)；
如果(!$input) {
返回错误的
}否则{
数据。name=$ input。价值；
data.isEdit=false
}
//修改编辑树形数据的内容
让编辑过滤器=这个。treesetdata。编辑列表。过滤器((item)=item。id==数据。id)；
if (editFilter.length==0){
这个。treesetdata。编辑列表。推送(数据)；
}否则{
这个。treesetdata。编辑列表。foreach((item，i)={
if(item.id==data.id) {
this.treeSetData.editList[i].name=data.name
}
})
}
},
//增加节点
节点添加(节点，数据){
if (data.pid！==0){
这个. message({type:错误，消息：通行区域最多只能有两级层次结构。});
返回错误的
}否则{
const new child={ id:this。treesetdata。默认id，名称：新增的通行区域，isEdit:false，pid:data.id，children:[]}；
如果(!data.children) {
这个$set(数据，孩子,[]);
}
数据。孩子。推(新小孩)；
这个。treesetdata。添加列表。推(新小孩)；
}
},
//节点删除
节点删除(节点，数据){
这个。treesetdata。删除列表。推送(数据)；
const parent=node.parent
常量子代=父代。数据。孩子 父母。数据；
const index=儿童。查找索引(d=d . id===数据。id)；
儿童拼接(索引，1);
},
然后将上面处理完的数据（要增加的数据：addList，要修改的数据：编辑列表，要删除的数据：删除列表)整体提交给后台去做数据库处理就可以了，但是需要注意一下以下的几种情况。
//先添加，后修改的数据整合
这个。treesetdata。添加列表。foreach((item，i)={
让编辑过滤器=这个。treesetdata。编辑列表。过滤器((值)=值。id==item。id)；
if(editFilter.length！==0){
这个。treesetdata。添加列表[I]=编辑筛选器[0]；
这个。treesetdata。editlist=this。treesetdata。编辑列表。过滤器((值)=值。id！==项。id)；
}
})
//先添加，后删除的数据整合
这个。treesetdata。删除列表。foreach((item，i)={
让添加过滤器=这个。treesetdata。添加列表。过滤器((值)=值。id==item。id)；
if(addFilter.length！==0){
这个。treesetdata。删除列表=this。treesetdata。删除列表。过滤器((值)=值。id！==项。id)；
这个。treesetdata。添加列表=this。treesetdata。添加列表。过滤器((值)=值。id！==项。id)；
}
})
//先编辑，后删除的数据整合
这个。treesetdata。删除列表。foreach((item，i)={
让编辑过滤器=这个。treesetdata。编辑列表。过滤器((值)=值。id==item。id)；
if(editFilter.length！==0){
这个。treesetdata。editlist=this。treesetdata。编辑列表。过滤器((值)=值。id！==项。id)；
}
})
树形组件样式
style lang=less 。El-messagebox { width:450 px；}。按钮样式{padding: 0px}。输入式{身高：15px宽度：140px}。贯穿面板-车身{
填充顶部：12px
宽度：100%;
显示器：flex。面板-区域-左侧{
位置：相对；
宽度：360像素
边框：2px实心rgba(240，240，240，1)；
边框半径：5px。标题{
显示器：flex justify-content:space-between；填充：10px 10px
H5 { border-left:solid 3px # FB 8742；左填充：5px高度：20px行高：20px字体大小：16px}
}。区域树{
宽度：100%;树状样式{
边距：0px 0px 10px 10px
身高：88%;
溢出-y:自动；
}。埃尔树节点_ _内容{
左填充：10px显示器：flex宽度：100%;树跨度{
显示器：flex宽度：100%;树节点操作{
左边距：10px颜色：# D3D3D3
}
}
}
}。add_question {
边距：10px 0px
}。脚型{
填充-右：5px
高度：40px
文本对齐：右对齐；
}
}。面板-区域-右侧{
右边距：5px
宽度：100%;
左填充：15px
身高：100%;el-row {
宽度：100%;
显示器：flex
justify-content:space-between；定位级{
宽度：50%;
}。设备-楼层-级别{
宽度：50%;
显示器：flex
justify-content:flex-end；
}
}
}
}
/风格
到此这篇关于某视频剪辑软件实现树形结构增删改查的示例代码的文章就介绍到这了，更多相关某视频剪辑软件树形结构增删改查内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。