el-table高度适应外围容器，ag-gride高度适应外围容器

1.1 el-table

<template>
  <div class="organization_setting">
    <div class="header">
      <el-select
        filterable
        clearable
        size="mini"
        v-model="searchId"
        @change="change"
        placeholder="请选择机构"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button size="mini" type="primary" @click="add">添加机构</el-button>
    </div>
    <div class="table">
      <div class="content" ref="organizationContainer">
        <el-table :height="height" :data="tableData" style="width: 100%" v-loading="tableLoading">
          <el-table-column
            prop="orgSname"
            label="机构名称"
            :formatter="emptyFormatter"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="orgName"
            label="机构全称"
            :formatter="emptyFormatter"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="orgContact"
            label="机构联系人"
            :formatter="emptyFormatter"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="orgContactNo" label="联系方式" :formatter="emptyFormatter">
          </el-table-column>
          <el-table-column
            prop="orgEmail"
            label="公共邮箱"
            :formatter="emptyFormatter"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="handle" label="操作" width="180">
            <template slot-scope="{ row }">
              <el-button size="mini" type="text" @click="edit(row)">编辑</el-button>
              <el-button size="mini" type="text" @click="deleteData(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[50, 100, 200]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <Create :visible.sync="visible" :title="title" :type="type" :row="row" @fresh="listOrgInfo" />
  </div>
</template>

<script>
import { listOrgInfo, delOrgInfoById, listOrgInfoCheckBox } from "@/pc/api/InternalEvaluate";
import Create from "./Create.vue";
import { __values } from "tslib";
export default {
  name: "organizationSetting",
  data() {
    return {
      height:200,
      title: "新增机构",
      visible: false,
      tableLoading: false,
      row: {},
      type: "add",
      searchId: "",
      options: [],
      tableData: [],
      pageSize: 100,
      currentPage: 1,
      total: 0
    };
  },
  components: {
    Create
  },
  methods: {
    emptyFormatter(row, colum, cellValue, index) {
      return cellValue == 0 || cellValue ? cellValue : "-";
    },
    listOrgInfo() {
      const data = { pageSize: this.pageSize, pageNo: this.currentPage, id: this.searchId };
      this.tableLoading = true;
      listOrgInfo(data)
        .then(res => {
          this.tableData = res.list;
          this.total = res.total;
          // 刷新筛选的列表
          this.listOrgInfoCheckBox();
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    add() {
      this.title = "新增机构";
      this.type = "add";
      this.visible = true;
    },
    edit(row) {
      this.type = "edit";
      this.title = "修改机构";
      this.row = row;
      this.visible = true;
    },
    deleteData(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delOrgInfoById({ id: row.id }).then(res => {
            this.$message.success("删除成功!");
            this.listOrgInfo();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    listOrgInfoCheckBox() {
      listOrgInfoCheckBox().then(res => {
        this.options = res;
      });
    },
    change(value) {
      this.searchId = value;
      this.listOrgInfo();
    },
    handleCurrentChange(value) {
      this.currentPage = value;
      this.listOrgInfo();
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this.listOrgInfo();
    }
  },
  mounted() {
    this.$nextTick(() => {
      const rect = this.$refs.organizationContainer.getBoundingClientRect();
      this.height = rect.height;
    });
  },
  created() {
    this.listOrgInfo();
    this.listOrgInfoCheckBox();
  }
};
</script>

<style lang="less" scoped>
.organization_setting {
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
  }
  .table {
    height: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    .content {
      flex: 1;
    }
    .page {
      padding: 8px 0;
      text-align: right;
    }
  }
}
</style>

1.2 ag-gride适应外围容器

<template>
  <div class="conflict-deal">
    <div class="header">
      <div>
        <el-input
          prefix-icon="el-icon-search"
          size="mini"
          style="width:220px;margin-right:10px"
          placeholder="搜索用户名、拼音"
          clearable
          v-model="searchInfo.str"
        ></el-input>
        <el-select
          filterable
          clearable
          size="mini"
          v-model="searchInfo.searchId"
          @change="change"
          placeholder="请选择机构"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <OpenButton @click="openClick" />
        <el-button size="mini" type="primary" @click="exportData">导出</el-button>
      </div>
    </div>
    <div class="table">
      <div class="content">
        <ag-basic-table
          style="width: 100%;height: 100%"
          :tableData="tableData"
          :embedFullWidthRows="true"
          :isRowMaster="isRowMaster"
          :masterDetail="true"
          :detailCellRenderer="detailCellRenderer"
          :components="customComponents"
          :defaultColDef="defaultColDef"
          :detailRowAutoHeight="true"
          @grid-ready="onGridReady"
          :columns="getColumns()"
        />
      </div>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[50, 100, 200]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import AgBasicTable from "@/pc/components/AgBasicTable.vue";
import OpenButton from "./OpenButton.vue";
import ConflictDetail from "./ConflictDetail.vue";
export default {
  name: "ConflictDeal",
  components: {
    AgBasicTable,
    OpenButton,
    // eslint-disable-next-line vue/no-unused-components
    ConflictDetail
  },
  data() {
    return {
      defaultColDef: { flex: 1 },
      gridApi: null,
      customComponents: { ConflictDetail: ConflictDetail },
      detailCellRenderer: "ConflictDetail",
      title: "新增机构",
      visible: false,
      tableLoading: false,
      searchInfo: {
        str: "",
        searchId: ""
      },
      row: {},
      options: [],
      tableData: [
        { name: "zhangsna", conflictTraderNum: 2 },
        { name: "zhangsna", conflictTraderNum: 0 }
      ],
      pageSize: 100,
      currentPage: 1,
      total: 0
    };
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api;
    },
    isRowMaster(dataItem) {
      console.log("dataItem", dataItem);
      return dataItem ? true : false;
    },
    getColumns() {
      return [
        {
          prop: "name",
          label: "姓名"
        },
        {
          prop: "phoneCode",
          label: "手机号"
        },
        {
          prop: "conflictTraderNum",
          label: "冲突券商数量",
          cellStyle: () => ({
            display: "flex",
            "justify-content": "center"
          }),
          cellRenderer: "agGroupCellRenderer"
        },
        {
          prop: "handel",
          label: "操作",
          render: () => {
            return (
              <el-button type="text" size="mini">
                {" "}
                展开详情
              </el-button>
            );
          }
        }
      ];
    },
    openClick(flag) {
      console.log(flag);
    },
    exportData() {
      // 导出
    },
    change(value) {
      this.searchId = value;
    },
    handleCurrentChange(value) {
      this.currentPage = value;
    },
    handleSizeChange(value) {
      this.pageSize = value;
    }
  }
};
</script>

<style lang="less" scoped>
.conflict-deal {
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
  }
  .table {
    height: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    .content {
      flex: 1;
    }
    .page {
      padding: 8px 0;
      text-align: right;
    }
  }
}
</style>