-
效果图
演示.gif
由于用的的递归组件，所以使用的是属性传函数的形式
<box-tree :pagec='pagec' :treeitem='treeitem' :list="list"></box-tree>
- 属性 说明
| 名称 | 类型 | 示例 | 说明 |
|---|---|---|---|
| pagec | Fn | pagec({ p, list }) {} | 返回当前点击分页数据和 |
| treeitem | Fn | treeitem({item,list,loads,index,open}) {} | 返回当前行的数据 |
| list | Obj | list: {labelw: [ ],col: {}} | label 为标题栏，col为显示数据 |
- 详细说明
- pagec
- 返回参数 p
返回当前点击分页的页数 - 返回参数 list
返回对应分页的list ajax数据请求可以在这里替换数据
- 返回参数 p
- pagec
pagec({ p, list }) {
console.log(p, list)
let arr = [{
total: 2, //分页总数 有该值显示分页
page: 1, //当前分页
id: a,//其他参数...
t: a,//其他参数...
arr: [{}] //子级 有该值显示下级箭头
}]
setTimeout(()=>{
list.arr =arr
})
}
- treeitem
- 返回参数 item
返回当前点击行的数据 - 返回参数 list
返回当前点击列表的数据 可用于ajax数据请求可以在这里加载下级 - 返回参数 loads
返回当前点击loads 状态(true,false) 修改即可实现 loading 效果 - 返回参数 index
返回当前点击的item 在当前list的index - 返回参数 open
返回当前点击item 下级是否打开 状态(true,false) 修改即可实现展开关闭修改
- 返回参数 item
treeitem(list) {
console.log(list)
//展开控制
if (list.open.type) {
this.$set(list.open, 'type', false)
return
}
this.$set(list.loads, 'type', true)
this.$set(list.open, 'index', list.index)
this.$set(list.loads, 'index', list.index)
// 获取数据
setTimeout(() => {
this.$set(list.loads, 'type', false)
this.$set(list.open, 'type', true)
console.log(list)
}, 1000)
},
- list
- 参数 labelw
标题栏- label 名称
- prop col 下面对应的key
- 参数 col
- total 分页总数 有该值显示分页
- page 当前页可修改
- arr 子级 有该值显示下级箭头
- 其他参数 与 labelw 对应的prop值皆可
- 参数 labelw
list: {
labelw: [
{
label: '会员编号',
prop: 'id'
},
],
col: {
total: 2,
page: 1,
id: 1,
t: 1,
arr: [{}] //子级 有该值显示下级箭头
}
}
