[toc] ### 一、 使用vue-element-admin提供的table表格 1.1 在router.js取消tableRouter的注释 1.2 在页面预览vue-element-admin提供的表格 1.3 使用最后一个表格`complex-table.vue` 1.4 将`complex-table.vue`页面的内容全部拷贝到`media.vue`组件内 ### 二、修改 `media.vue` 组件的布局 2.1 修改头部的布局 2.2 删除一些不用的属性和方法 ``` <div class="filter-container" style="display:flex;justify-content: space-between;"> <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate"> 新增图文 </el-button> <div> <el-select v-model="listQuery.status" placeholder="商品状态" clearable style="width: 90px;margin-right:10px;" class="filter-item"> <el-option v-for="(item,k) in statusOptions" :key="k" :label="item" :value="k" /> </el-select> <el-input v-model="listQuery.title" placeholder="标题" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" /> <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"> 搜索 </el-button> </div> </div> ```