1. 程式人生 > 其它 >Vue.js table表格新增橫向滾動條

Vue.js table表格新增橫向滾動條

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