element-ui设置table组件宽度（width）为百分比

直接设置width：'xx%'是无效的，所有的width都设置为min-width，然后每一个el-table-column都需要设置百分比才会生效。代码如下：<el-table-columnprop="projectName"min-width="24%" //设置百分比label="项目点位名称"/><el-t...

小太阳...

23225人浏览 · 2020-04-28 19:40:24

小太阳... · 2020-04-28 19:40:24 发布

直接设置width：'xx%'是无效的，
所有的width都设置为min-width，然后每一个el-table-column都需要设置百分比才会生效。
代码如下：

    <el-table-column
      prop="projectName"
      min-width="24%" //设置百分比
      label="项目点位名称"/>
    <el-table-column
      prop="sumPre"
      min-width="12%" //设置百分比
      label="累积降水量">
      <template slot-scope="scope">
        {{ parseFloat(scope.row.sumPre.toFixed(1)) }} mm
      </template>
    </el-table-column>
    <el-table-column
      prop="companyName"
      min-width="24%" //设置百分比
      label="所属单位"/>
    <el-table-column
      prop="province"
      min-width="10%" //设置百分比
      label="省"/>
    <el-table-column
      prop="city"
      min-width="10%" //设置百分比
      label="市"/>
    <el-table-column
      prop="county"
      min-width="10%" //设置百分比
      label="区县"/>