element table树形结构,element ui 树形结构
这篇文章主要为大家详细介绍了某视频剪辑软件元素-用户界面表格实现树形结构表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了元素-用户界面表格实现树形结构表格的具体代码，供大家参考，具体内容如下
前端效果展示：
在埃尔表中，支持树类型的数据的显示。当排中包含孩子们字段时，被视为树形数据。渲染树形数据时，必须要指定行键。支持子节点数据异步加载。
通过指定排中的属性字段来指定哪些行是包含子节点儿童。与属性都可以通过树支柱配置。
row-key=id 和：tree-props= { children: children ，hasChildren: hasChildren}是必须的。
下面是某视频剪辑软件的表格树：
！-表格-
el-row
El-table:data= table data style= width:100%；row-key= id :tree-props= { children: children ，hasChildren: hasChildren}
埃尔表列属性=privilegeName 标签=权限名称
/El-表格-列
El-table-column prop=特权代码 label=权限编码
/El-表格-列
El-table-column prop= privilegeType label=权限类别：formatter=formatPrivilegeType
/El-表格-列
埃尔-表格-列标签=操作
模板槽-范围="范围"
El-button type= primary size= mini @ click= to add(scope)新增/el-button
El-button type= primary size= mini @ click= toEdit(scope)编辑/el-button
/模板
/El-表格-列
/el-table
英国铁路公司
埃尔分页
@size-change=handleSizeChange
@ current-change= handleCurrentChange
:current-page=分页。页面索引
:page-size=[5，10，20，30，40]
:page-size=pagination.pageSize
布局=总计，上一页，翻页，下一页
:total=pagination.total
/El-分页
/el-row
后端代码：SpringBoot MyPlus MySQL8实现数据结构查询
前端全部代码：
风格
/风格
模板
div id=特权管理器
！-顶部菜单栏-
El-form:inline= true class= demo-form-inline
埃尔-表单-项目
埃尔按钮
El-图标-刷新
type=primary
@click=toAdd()添加
/el-button
/El-表单-项目
/el格式
！-表格-
el-row
El-table:data= table data style= width:100%；row-key= id :tree-props= { children: children ，hasChildren: hasChildren}
埃尔表列属性=privilegeName 标签=权限名称
/El-表格-列
El-table-column prop=特权代码 label=权限编码
/El-表格-列
El-table-column prop= privilegeType label=权限类别：formatter=formatPrivilegeType
/El-表格-列
埃尔-表格-列标签=操作
模板槽-范围="范围"
El-button type= primary size= mini @ click= to add(scope)新增/el-button
El-button type= primary size= mini @ click= toEdit(scope)编辑/el-button
/模板
/El-表格-列
/el-table
英国铁路公司
埃尔分页
@size-change=handleSizeChange
@ current-change= handleCurrentChange
:current-page=分页。页面索引
:page-size=[5，10，20，30，40]
:page-size=pagination.pageSize
布局=总计，上一页，翻页，下一页
:total=pagination.total
/El-分页
/el-row
/div
/模板
脚本
导出默认值{
姓名：特权经理，
data () {
返回{
表数据：[],
dialogFormEdit: false，
dialogFormAdd:false，
特权：{
id: ，
特权名称：""，
特权代码："",
特权类型："",
PID:“0”
},
分页：{
pageIndex: 1，
页面大小：10,
总计：0,
}
}
},
方法：{
init () {
var self=this
这个. axios({
方法： post ，
URL:"/API/宝安/权限/获取页面",
数据：{ page :这个。分页。pageindex， limit :这个。分页。pagesize， pid: this.privilege.pid}，
标题：{
内容类型":"应用程序/JSON；charset=utf-8 //改这里就好了
}
}).然后(res={
控制台。日志(分辨率)；
自我。分页。总计=研究数据。数据。数据。总计；
自我。表数据=研究数据。数据。数据。记录；
})。接住(函数（错误){
console.log(错误)
})
},
handleSizeChange(val) {
控制台。日志(` o每页${val}条`);
这个。分页。pagesize=val
这个。分页。页面索引=1；
这个。init()；
},
handleCurrentChange(val) {
控制台。日志(` o当前页：$ { val } `)；
这个。分页。页面索引=val
这个。init()；
},
//权限类别转换
格式特权文件类型：函数（行，列){
if(row.privilegeType===1){
返回目录
} else if(行。privilegetype=== 2 ){
返回菜单
} else if(行。privilegetype=== 3 ){
返回按钮
}否则{
返回""
}
}
},
已安装：函数(){
this.init()
}
}
/脚本
总结：
一、注意需要在前端表格里面改的是：
二、后端主要改的是：
(1)视图层里面加入视图层集合属性，注意一定要命名为孩子们，这样前端才能渲染成树型结构。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。