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