vue通过element树形控件实现树形表格
作者:一只小木头.
这篇文章主要为大家介绍了vue element树形控件实现树形表格,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
在vue中通过element树形控件来实现树形表格的效果
通过缩进来实现近似树形表格的效果
实现效果图
安装依赖
$ npm install element-plus --save
自定义树形控件
分析图中控件分布,每个参数都有固定的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-ui实现树形控件节点添加图标
总结
树形表格主要通过element的树形控件的自定义函数renderContent结合css来实现
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!