• vue jsx 封装Table 表格+Tree 树形控件


    背景介绍

    通过表格展示树的层级,可通过对树的勾选对每一个界面的dom元素进行控制,控制程度可精确到组件/标签

    图片预览

    需求分析

    1.根据树形结构获取层级(列数)
    2.根据数据动态控制表格列数
    3.格式化表格内容
    4.将单元格内容(扁平化)转为结构化数据
    5.勾选/取消勾选时关联相关层级

    树形结构设置层级

    层级部分数据如下图所示

    设置第一层

    data(){return {index: '', //自定义列内容出现index未定义报错,需加上index参数numberList:[],num:0}
    }
    
    deepTableDataFirstLevel(data){ //setting first level 第一层var that = this;that.num ++;if(that.numberList.indexOf(that.num) == -1){that.numberList.push(that.num);}data.filter(v=>{that.$set(v,'level',that.num);that.$set(v,'parentId',0);if(v.children && v.children.length > 0){that.deepTableDataOrderLevel(v.children,(that.num+1),v.id)}})
    } 
    

    num为层级

    第一层默认parentId为0

    numberList存储层级(储存标识防止重复层级)

    设置其他层

    deepTableDataOrderLevel(data,num,id){ //setting order level 其他层级var that = this;if(that.numberList.indexOf(num) == -1){that.numberList.push(num);}data.filter(v=>{that.$set(v,'level',num);that.$set(v,'parentId',id);if(v.children && v.children.length > 0){that.deepTableDataOrderLevel(v.children,(num+1),v.id)}})
    } 
    

    data为父级列表

    父级列表遍历设置相同层级

    每到下一层层级+1

    deepTableDataOrderLevel方法每执行一次就把当前对象(存在children情况下)递归该对象chilren参数列表并给其对象设置层级

    将相同层级数据转换为table列表数据

    转换第一层

    data(){return {num:0,index: '', //自定义列内容出现index未定义报错,需加上index参数columnData:[],levelObj:{}}
    }
    
    handleTable(data){ //setting first level 第一层var that = this;that.columnData = [];that.levelObj = {};data.filter((v,index)=>{that.$set(that.colum
  • 相关阅读:
    27-spark各版本对比
    js arrys函数
    yum更换源
    面试题------线程池的拒绝策略
    python 使用curl_cffi 绕过jax3指纹-Cloudflare 5s盾
    当添加一个键值对元素时,HashMap发生了什么?
    js前端获取农历日期
    零基础学习python的第一天整理——python的安装以及pycharm安装
    设计模式详解之结构型设计模式——适配器、装饰器
    Scrapy第十篇:selenium4模拟器中间件
  • 原文地址:https://blog.csdn.net/web2022050901/article/details/127113185