Vue.js table表格添加横向滚动条

最新推荐文章于 2025-03-31 14:57:02 发布

Lucky小黄人

最新推荐文章于 2025-03-31 14:57:02 发布

阅读量4.2k

点赞数

文章标签： vue.js elementui javascript 前端 ecmascript

本文链接：https://blog.csdn.net/qq_41767116/article/details/124812720

版权

只需要在最后一列指定列宽即可。比如下面最后一列是“操作”列，加上 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>