Vue.js table表格新增橫向滾動條
阿新 • • 發佈:2022-05-17
只需要在最後一列指定列寬即可。比如下面最後一列是“操作”列,加上 width="200",即會在表格寬度大於瀏覽器頁面寬度時顯示橫向滾動條了
<el-table ref="multipleTable" v-loading="loading" :data="taskList"> <el-table-column type="selection" width="50" align="left" /> <el-table-column label="任務編號" width="60" align="left" prop="id" ></el-table-column> <el-table-column label="素材型別" width="60" align="left" prop="status"> <template slot-scope="scope"> <p v-if="scope.row.status==0">success</p> <p v-else-if="scope.row.status==1">fail</p> <p v-else>未知</p> </template> </el-table-column> <el-table-column label="其他" width="100" align="left" prop="detail" :show-overflow-tooltip="true" /> </el-table-column> <el-table-column label="建立時間" align="left" prop="create_time_str" width="160"></el-table-column> <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="200"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-detail" @click="handleShowTaskDetail(scope.row)">任務詳情</el-button> </template> </el-table-column> </el-table>