avue表格自适应大小去除滚动条

效果图:

代码实现:

    <template v-if="visible">
      <avue-crud
        :option="option"
        :table-loading="loading"
        :data="data"
        ref="crud"
        v-model="form"
        :permission="permissionList"
        :before-open="beforeOpen"
        @row-click="handleRowClick"
        @row-update="rowUpdate"
        @row-save="rowSave"
        :page="page"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @on-load="onLoad"
        @tree-load="treeLoad"
      >
        <template slot-scope="scope" slot="menu">
          <el-button
            type="text"
            icon="el-icon-circle-plus-outline"
            size="small"
            @click.stop="handleAdd(scope.row,scope.index)"
          >调整</el-button>
          <template slot-scope="{row}" slot="roleId">
            <el-tag>{{row.rankName}}</el-tag>
          </template>
        </template>
      </avue-crud>
    </template>


	export default {
  		data() {
    		return {
      		visible: true,
      		isFirst: true
    		};
  		},
 	}
 methods:{
   resetHeightHandler() {
      let t = this;
      window.addEventListener("resize", function() {
        t.resetHeight();
      });
      t.resetHeight();
    },
   resetHeight() {
      let windowHeight = document.body.clientHeight;
      let header = document.getElementsByClassName("avue-header")[0]
        .clientHeight;
      let avueTags = document.getElementsByClassName("avue-tags")[0]
        .clientHeight;
      let search = document.getElementsByClassName("avue-crud-search")[0]
        .clientHeight;
      this.option.height = windowHeight - header - avueTags - search - 160;
      this.visible = false;
      this.$nextTick(() => {
        this.visible = true;
      });
    },
  }