--树形数据查询示例

树形数据查询示例及函数应用
博客给出树形数据查询示例,包含创建表、插入数据、创建查询指定id所有子的函数,还展示了函数调用及删除测试的代码,涉及SQL的表操作、插入、函数创建等信息技术内容。
--参考

--树形数据查询示例
--作者: 邹建

--示例数据
create table [tb]([id] int identity(1,1),[pid] int,name varchar(20))
insert [tb] select 0,'中国'
union  all  select 0,'美国'
union  all  select 0,'加拿大'
union  all  select 1,'北京'
union  all  select 1,'上海'
union  all  select 1,'江苏'
union  all  select 6,'苏州'
union  all  select 7,'常熟'
union  all  select 6,'南京'
union  all  select 6,'无锡'
union  all  select 2,'纽约'
union  all  select 2,'旧金山'
go

--查询指定id的所有子
create function f_cid(
@id int
)returns @re table([id] int,[level] int)
as
begin
    declare @l int
    set @l=0
    insert @re select @id,@l
    while @@rowcount>0
    begin
        set @l=@l+1
        insert @re select a.[id],@l
        from [tb] a,@re b
        where a.[pid]=b.[id] and b.[level]=@l-1
    end
/*--如果只显示最明细的子(下面没有子),则加上这个删除
    delete a from @re a
    where exists(
        select 1 from [tb] where [pid]=a.[id])
--*/
    return
end
go

--调用(查询所有的子)
select a.*,层次=b.[level] from [tb] a,f_cid(2)b where a.[id]=b.[id]
go

--删除测试
drop table [tb]
drop function f_cid
go
 

### 实现 Element Plus 表格中的树形数据展示 在 Element Plus 中实现表格的树形数据展示,可以通过设置 `tree-props` 属性来指定子节点的关键字名称。这使得可以轻松地显示具有层次结构的数据[^1]。 下面是一个完整的 Vue 组件示例,展示了如何配置带有树形数据的表格: ```vue <template> <el-table :data="tableData" style="width: 100%" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { name: "TreeTable", data() { return { tableData: [ { id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', children: [ { id: 2, date: '2016-05-04', name: '王小虎的儿子', address: '上海市普陀区金沙江路 1517 弄' } ] }, { id: 3, date: '2016-05-01', name: '李大牛', address: '上海市普陀区金沙江路 1519 弄', children: [] } ] }; } }; </script> ``` 在这个例子中,通过给 `<el-table>` 添加 `row-key` 和 `tree-props` 来支持树状结构的数据渲染。其中 `row-key` 定义每一行唯一标识符字段名;而 `tree-props.children` 则指定了子项数组所在的属性名称,`hasChildren` 可选用于指示是否有子项的存在标志位。 对于更复杂的场景,比如动态加载子级数据或者控制某些特定条件下的折叠/展开行为,则可能还需要结合其他 API 或者自定义逻辑处理。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值