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