0
点赞
收藏
分享

微信扫一扫

Iview Tree组件点击标题展开

需求分析

  • 容器的高度自适应
  • table 的高度由数据的条数决定
  • 需要让分页器始终处于容器底端

Iview Tree组件点击标题展开_数据

解决方案

上一步我们通过利用 flex 布局实现了容器高度的响应式,使得容器的高度不再需要去计算。

Iview Tree组件点击标题展开_edn_02

现在我们只关注 middle 部分

当我们添加了分页器后,很明显这一部分又变成了经典的上中下布局。这样就可以继续使用 flex 布局。

Iview Tree组件点击标题展开_数据_03

此时的 dom 结构如下,为了防止命名冲突,在前面加上了 h- 前缀

<div class="middle">
<div class="h-header"></div>
<div class="h-body"></div>
<div class="h-footer"></div>
</div>

css 按照下面这样设置

.middle {
flex: 1;
background: #2f3e59;
margin-right: 8px;
display: flex;
flex-direction: column;
justify-content: flex-start;
.h-body {
overflow: auto;
flex: 1;
}
.h-footer {
padding-bottom: 10px;
padding-left: 10px;
background: #2f3e59;
}
}

最后验证一下随着容器的改变,是否会一直定位在底部,看起来是符合要求的

Iview Tree组件点击标题展开_分页_04

最后增加一下 table 数据的条数,可以看到如果数据条数过多,不会撑开容器的高度,也不会影响分页器的位置,只是在自己的位置进行滚动。

Iview Tree组件点击标题展开_edn_05

示例地址:http://localhost:55555/#/test/layout

tree 组件如下

<YsTree :data="dataSetTreeData" @on-select-change="onSelectTreeItem" expand-node></YsTree>

修改 on-select-change 事件,回调参数为:当前已选中的 节点数组当前项

onSelectTreeItem(item, selectedNode) {
console.log("selectedNode", selectedNode);
},

直接打印出当前项,发现并没有用来控制展开收起的字段 expand

Iview Tree组件点击标题展开_数据_06

所以需要在 onSelectTreeItem 回调中添加并修改 expand 字段,由于 vue2 的缺陷,在方法中定义响应式变量需要使用 $set

onSelectTreeItem(item, selectedNode) {
this.$set(selectedNode, "expand", !selectedNode.expand);
console.log("selectedNode", selectedNode);
},

再次输出 log ,看一下结果

Iview Tree组件点击标题展开_分页_07

最终效果如下

Iview Tree组件点击标题展开_前端_08

举报

相关推荐

0 条评论