你也许不知道的avue(2)——动态改变表格高度

糟糕！菜单局部展开收缩功能，会导致元素挤压，页码栏被挡着怎么办？

———表格动态高度动态赋值不就好了吗？

—— 如何去做

1.查看文档是否有展开收缩事件

没有

2.查看源码收缩事件是如何控制的

查看源码知道展开收缩按钮是通过给show赋值实现的，并且并没有向外暴露事件。所以我们这个值判断然后动态给表格高度赋值不就行了吗？

3.查看this.$refs.curd里面的值

我们可以看到能够找到show的值，那么接下来如何监听这个值得变化呢？ 可能不那么容易。 但是，我们我可以监听div的变化。 代码如下：

  mounted() {
    const erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementsByClassName("el-card__body"), () => {
      this.$nextTick(() => {
        let isShowAllMenu = this.$refs.crud.$refs.headerSearch.show;
        //整个内容高度
        let bodyHeight = document.getElementsByClassName("avue-main")[0]
          .clientHeight;
        //搜索栏高度
        let contentHeight = document.getElementsByClassName(
          "el-collapse-item__wrap"
        )[0].clientHeight;
        //点击“展开搜索”或者“收缩”，table的高度动态赋值
        if (isShowAllMenu) {
          this.$refs.crud.$refs.table.$el.style.height =
            bodyHeight - contentHeight - 230 + "px";
        } else {
          this.$refs.crud.$refs.table.$el.style.height =
            bodyHeight - contentHeight - 229 + "px";
        }
      });
    });
  },

综上所述：就是因为搜索收缩没有事件导致要费这么大的劲。