表格型页面布局

表格布局包含三个插槽区域，总体高度为自适应。

条件过滤器： 用于放置查询条件内容，该空间可根据内部查询条件的多少，自动换行。
操作栏： 用于放置操作按钮，非必须项。
表格区域： 用于放置表格。如果条件区域换行，则表格区域高度将缩小。

Alt text

html

<app-table-layout>
  <!-- 条件过滤器 -->
  <template #filter>
    <app-filter-container v-model="conditions" :loading="loadingQuery" :filters="defineFilters" @search="search"></app-filter-container>
  </template>
  <!-- 操作栏 -->
  <template #operates>
    <el-button v-checkright="'MemberLevel_Add'" :loading="loading" type="primary" @click="showNew" :icon="Plus">新增</el-button>
    <el-button v-checkright="'MemberLevel_Delete'" type="danger" :icon="Delete" @click="onDelete(null)">批量删除</el-button>
  </template>
    <!-- 表格 -->
  <template #table>
    <app-table :loading="loadingQuery" v-model:searchEvent="searchEvent" @search="search" :columns="defineColumns" :data="data" show-page></app-table>
  </template>
</app-table-layout>

表格型页面布局 ​

表格型页面布局