elementui設置el-table-column寬度百分比


1.el-table-column不設置width與minwidth,每一列自適應,寬度一致

2.el-table-column設置width=30%,無效。

  el-table 組件會被 vue 解析成 html, width 設置百分比的值直接被解析去掉百分號變成 px 了

3.el-table-column設置min-width="30"或者30%,每一列都設置min-width才能實現每一列的百分比配置

<el-table
      :data="tableList"
      v-loading="loading"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      highlight-current-row
    >
      <el-table-column label="序號" type="index" min-width="5%" align="center"></el-table-column>
      <el-table-column prop="xxxx" label="xxxx" align="left" min-width="25%"></el-table-column>
      <el-table-column prop="xxxx" label="xxxx" align="center" :formatter="formatTd" min-width="12%"></el-table-column>
      <el-table-column prop="xxxx" label="xxxx" align="center" :formatter="formatTd" min-width="20%"></el-table-column>
      <el-table-column label="xxxx" align="center" :formatter="formatTd" min-width="12%">
        <template slot-scope="scope">
          <el-link
            type="primary"
            v-if="scope.row.xxxx"
            @click="xxxx(scope.row)"
          >{{scope.row.xxxx}}</el-link>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="xxxx" label="xxxx" align="center" :formatter="formatTd" min-width="12%"></el-table-column>
      <el-table-column prop="xxxx" label="xxxx" align="center" :formatter="formatTd" min-width="12%"></el-table-column>
      <!-- 表格數據為空 -->
      <div slot="empty" v-show="isShow">
        <emptyTable emptyText="暫無相關數據"></emptyTable>
      </div>
    </el-table>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM