如果数据给的是树形 转好的树形结构并且是有两个二级children的话 该如何写?

简介: 如果数据给的是树形 转好的树形结构并且是有两个二级children的话 该如何写?

第一我们要自己写一个children  并且张数据里面的所要渲染的二级进行赋值  赋给我们新建的children

以下是代码转树形赋值

  organ().then(function (res) {
            console.log(res); // 成功回调
            // setLists(res.data.data)
            res.data.data = res.data.data.map((obj) => ({
                ...obj, // 复制当前对象的所有属性
                children: [], // 添加一个空的 children 数组
            }));
            for (let i = 0; i < res.data.data.length; i++) {
                res.data.data[i].children = res.data.data[i].project;
                for (let k = 0; k < res.data.data[i].children.length; k++) {
                    res.data.data[i].children[k].account = res.data.data[i].children[k].title;
                    setList(res.data.data)
                    setIndexoff(res.data.data)
                }
            }
            // copyList.value = list.value;
        })

第一个封装的接口 第二个是赋值所有的数据,再将数据赋值到新的children里面就可以实现  

最后将转好的children树形数据 再声明const 进行赋值  在表格中进行渲染  table有他自己的属性 自动会进行渲染即可

 <Table
                rowKey={(record) => `${record.id}-${record.id}`}
                columns={columns}
                pagination={{
                    position: ['bottomCenter'],
                    defaultPageSize: '5',
                    showSizeChanger: true,
                    showQuickJumper: true,
                    pageSizeOptions: [5, 10, 15, 20]
                }}
                style={{ 'paddingTop': '30px' }}
                bordered
                onRow={(record) => {
                    return {
                        onClick: () => { information(record) }, // 点击行
                    };
                }}
                dataSource={list}
            />
相关文章
|
小程序
微信小程序在使用vant组件van-nav-bar出现的边框bug问题解决
微信小程序在使用vant组件van-nav-bar出现的边框bug问题解决
568 0
|
小程序 开发工具 Android开发
uni-app使用HBuilder X编辑器本地打包apk步骤说明
uni-app使用HBuilder X编辑器本地打包apk步骤说明
3311 0
|
网络安全 开发工具 git
Mac安装Git
Mac安装Git
440 2
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`&#39;1.2,2,3,4,5&#39;`)转换为对象数组。通过使用`split(&#39;,&#39;)`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
701 2
|
开发工具 git
对于github不同的分支main或者master,git拉取代码的时候怎么拉取不同分支的代码
对于github不同的分支main或者master,git拉取代码的时候怎么拉取不同分支的代码
766 1
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式
|
JSON Java UED
uniapp:使用DCloud的uni-push推送消息通知(在线模式)java实现
以上展示了使用Java结合DCloud的uni-push进行在线消息推送的基本步骤和实现方法。实际部署时,可能需要依据实际项目的规模,业务场景及用户基数进行必要的调整和优化,确保消息推送机制在保证用户体验的同时也满足业务需求。
1895 0
|
JavaScript
vue父子组件传值,父组件内容更新子组件内容不实时更新
vue父子组件传值,父组件内容更新子组件内容不实时更新
4277 0
|
JavaScript 小程序 前端开发
|
移动开发 前端开发 JavaScript
uniapp如何打包h5项目
uniapp如何打包h5项目
1719 0

热门文章

最新文章