zoukankan      html  css  js  c++  java
  • Element el-table-column组件列宽度设置百分比无效

    问题

    使用Element table组件时,给列设置百分比宽度无效(width="30%")

    解决

    用属性min-width="3"代替属性width="30%",且每一列都必须设置

    原因

    el-table 组件会被 vue 解析成 html, width 设置百分比的值直接被解析去掉百分号变成 px 了。设置成 min-width 之后,width 的值就被计算成 (当前值 / 所有列值和)的百分比了。

    解释

    width,min-width 原理都是将值百分比去掉变成px。但是min-width会按照比例分配剩余空间。并不是直接算的百分比。(所以要每一列都设置min-width才能实现每一列的百分比配置)

    示例

    一行有 5 列:
    col1: min-width='1'
    col2: min-width='1'
    col3: min-width='1'
    col4: min-width='1'
    col5: min-width='2'

    col1: width占1 / 6
    col2: width占1 / 6
    col3: width占1 / 6
    col4: width占1 / 6
    col5: width占2 / 6

  • 相关阅读:
    bzoj 1040: [ZJOI2008]骑士
    CF Playrix Codescapes Cup Problems Analysis
    C++ 指针[转+原创]
    高斯消元
    NOIP模拟
    线段树合并
    After ZJOI2017 day2
    ZJOI 2017 day2 4.27
    ZJOI 2017 二试 day1 4.26
    ZJOI 2017 二试 day0
  • 原文地址:https://www.cnblogs.com/itzlg/p/11891822.html
Copyright © 2011-2022 走看看