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

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

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

实现效果图

vue通过element树形控件实现树形表格_第1张图片

安装依赖

$ npm install element-plus --save

Element官网

自定义树形控件

vue通过element树形控件实现树形表格_第2张图片

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

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




其他实现

element树形控件添加虚线

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

总结

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

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

你可能感兴趣的