[toc] ### 一、修改表格的字段 ### 二、修改圖文內容的布局 ### 三、刪除一些不需要的欄目 ### 四、修改操作按鈕的內容 - 表格最終代碼 ``` <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;" @sort-change="sortChange"> <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')"> <template slot-scope="{row}"> <span>{{ row.id }}</span> </template> </el-table-column> <el-table-column label="圖文內容" min-width="180px"> <template slot-scope="{row}"> <div style="display: flex;"> <img :src="row.cover" style="width: 100px;height: 50px;margin-right: 10px;"> <div style="display: flex;flex-direction: column;justify-content: space-between;"> <span>{{ row.title }}</span> <span style="color: red;">￥{{ row.price }}</span> </div> </div> </template> </el-table-column> <el-table-column label="訂閱量" width="110px" align="center"> <template slot-scope="{row}"> <span>{{ row.sub_count }}</span> </template> </el-table-column> <el-table-column label="狀態" class-name="status-col" width="100"> <template slot-scope="{row}"> <el-tag :type="row.status ? 'success' : 'danger'"> {{ row.status | statusFilter }} </el-tag> </template> </el-table-column> <el-table-column label="創建時間" width="150px" align="center"> <template slot-scope="{row}"> <span>{{ row.created_time }}</span> </template> </el-table-column> <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width"> <template slot-scope="{row,$index}"> <el-button type="primary" size="mini" @click="handleUpdate(row)"> 編輯 </el-button> <el-button v-if="row.status == 0" size="mini" type="success" @click="handleModifyStatus(row,1)"> 上架 </el-button> <el-button v-if="row.status == 1" size="mini" @click="handleModifyStatus(row,0)"> 下架 </el-button> <el-popconfirm title="是否要刪除該記錄？" @onConfirm="handleDelete(row,$index)" style="margin-left:10px;"> <el-button v-if="row.status!='deleted'" size="mini" type="danger" slot="reference">刪除</el-button> </el-popconfirm> </template> </el-table-column> </el-table> ```