Iview Tree组件点击标题展开

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

需求分析

• 容器的高度自适应
• table 的高度由数据的条数决定

• 需要让分页器始终处于容器底端

解决方案

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

现在我们只关注 middle 部分

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

此时的 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;
    }
  }
复制代码

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

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

示例地址：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

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

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

再次输出 log ，看一下结果

最终效果如下