| 在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来实现 本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注51zixue.net的更多内容!
下载地址:
Vue
vue网络请求方案原生网络请求和js网络请求库 |
