vue+elementUI 表格高度自适应

小福气_

已于 2023-09-22 13:57:08 修改

阅读量692

点赞数

文章标签： elementui vue.js

于 2022-09-07 08:37:55 首次发布

本文链接：https://blog.csdn.net/u013486889/article/details/126737729

版权


  <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>