vue通过element树形控件实现树形表格

目录

• 实现效果图
• 安装依赖
• 自定义树形控件
• 其他实现
• 总结

在vue中通过element树形控件来实现树形表格的效果

通过缩进来实现近似树形表格的效果

实现效果图

安装依赖

$ npm install element-plus --save

Element官网

自定义树形控件

分析图中控件分布，每个参数都有固定的width，通过width让数值达到对齐的效果

代码主要通过renderContent函数来自定义树形控件

<template>
<div class="mytree">
<el-tree
:data="tree_data"
:props="defaultProps"
@node-click="handleNodeClick"
indent="0"
:render-content="renderContent"
></el-tree>
</div>
</template>
<script lang="ts">
import { defineComponent, ref  } from 'vue'
export default defineComponent({
components: {},
data() {
return {
tree_data: [
{
// type:1,
label: 'notice-id1',
children: [
{
label: ['卫星名称代号','ZOHREH-2'],
},
{
label: ['组织机构','IRN'],
},
{
label: ['频率范围','10950-1450'],
},
{
label: '[上行]beam名称',
children: [
{
label:['name','RS49'],
},
{
label:['freq_min','10950'],
},
{
label:['freq_max','14500'],
},
{
label:[]'group('+'3'+')','']
children:[
{
label:['10600361','10950','11200','0']
},
{
label:['10600361','10950','11200','0']
},
{
label:['10600361','10950','11200','0']
}
]
}
]
},
],
},
],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
method:{
// 自定义树形控件函数 node代表每个节点
renderContent(h,{node,data,store}){
// div代表树形控件的一行，div中包含三个span标签
// 判断节点的label数组数量，通过三目运算来选择class
// 设置class来控制树形控件进行对齐
return h('div',[
h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]),
h('span', {class:'groupStyle'},node.label[1]),
h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? 				'':node.label[2])
]);
},
}
})
</script>
<style lang="scss" scoped>
.nodeStyle{
width:110px;
display:inline-block;
text-align:left;
}
.groupStyle{
width:150px;
display:inline-block;
text-align:left;
}
</style>

其他实现

element树形控件添加虚线

Element-ui实现树形控件节点添加图标

总结

树形表格主要通过element的树形控件的自定义函数renderContent结合css来实现

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

• Vue element树形控件添加虚线详解
• vue Element-ui表格实现树形结构表格
• Vue组件库ElementUI实现表格加载树形数据教程
• vue+element UI实现树形表格
• Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
• Vue Element-ui实现树形控件节点添加图标详解