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

前往低代码交流专区

更多推荐