广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >使用element-ui设置table组件宽度(width)为百分比
  • 291
分享到

使用element-ui设置table组件宽度(width)为百分比

摘要

目录element-ui设置table组件宽度为百分比代码如下element-ui设置table组件width为百分比无效原理总结element-ui设置table组件宽度为百分比

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

直接设置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="区县"/>

element-ui设置table组件width为百分比无效

用min-width代替width

原理

解析的时候min-width和width设置的百分比号会被替换成px,但是min-width会按照比例分配剩余空间,所以要每一列都设置百分比,或写数值,相当于设置各列的宽度比例值

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 使用element-ui设置table组件宽度(width)为百分比

本文链接: https://www.lsjlt.com/news/209335.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作