<div class="list-page">
<el-container>
<el-header>
<!-- 搜索区域 BEGIN -->
<el-form class="search-box" :model="dataGrid.parms" @submit.enter.prevent>
<el-form-item>
<el-input placeholder="名称" v-model="dataGrid.parms.keyword" clearable @keyup.enter="initLeftList()">
<template #suffix>
<el-icon class="el-input__icon pointer" @click="bindTable()">
<search />
</el-icon>
</template>
</el-input>
</el-form-item>
</el-form>
<!-- 搜索区域 END -->
<!-- 按钮区域 BEGIN -->
<div class="button-box">
<el-button type="primary" @click="openAdd=true"><i class="el-icon--left bi bi-plus-lg"></i>添加</el-button>
</div>
<!-- 按钮区域 END -->
</el-header>
<el-main>
<el-table :data="dataGrid.data" :default-sort="dataGrid.orderBy" v-loading="dataGrid.loading" @sort-change="dataGrid.sortChange" @selection-change="dataGrid.selectionChange" height="100%" border stripe>
<!-- 冻结列-Left BEGIN -->
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" type="index" width="80" fixed header-align="center" align="center" />
<!-- 冻结列-Left END -->
<el-table-column label="名称" prop="mc" header-align="center" align="center" show-overflow-tooltip sortable :sort-orders="['ascending', 'descending']">
<template #default="scope">
<span style="color: #409EFF;cursor: pointer;" @click="openDetail=true; row=scope.row">{{scope.row.mc}}</span>
</template>
</el-table-column>
<!-- 冻结列-Right BEGIN -->
<el-table-column label="操作" width="120" fixed="right" header-align="center" align="center">
<template #default="scope">
<el-button link type="primary" @click="openEdit=true; row=scope.row">修改</el-button>
<el-button link type="warning" @click="dataGrid.multipleSelection=[scope.row.id]; remove()">删除</el-button>
</template>
</el-table-column>
<!-- 冻结列-Right END -->
</el-table>
</el-main>
<el-footer>
<pagination :pagination="dataGrid.pagination" @ReturnData="bindTable" />
</el-footer>
</el-container>
</div>
vue+elementUI 表格高度自适应
于 2022-09-07 08:37:55 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)