问题

使用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

Element el-table-column组件列宽度设置百分比无效的更多相关文章

  1. ORA-01747: user.table.column, table.column 或列说明无效

    Oracle.DataAccess.Client.OracleException ORA-01747: user.table.column, table.column 或列说明无效 原因1: 查了一下 ...

  2. user.table.column, table.column 或列说明无效

    Oracle统计采用别名出错(user.table.column, table.column 或列说明无效) >>>>>>>>>>>& ...

  3. 关于“ORA-01747: user.table.column, table.column 或列说明无效”的报错。

    今天在工程中遇到“ORA-01747: user.table.column, table.column 或列说明无效”的报错情况,查了一下是由于数据库列名起的不好引起的,名字用到了数据库的关键字.

  4. “ORA-01747: user.table.column, table.column 或列说明无效” 的解决方案

    此问题的原因是因为表的列名称使用了Oracle声明的关键字,列名起的不好引起的. 如果列很多,又不好确定是哪个列名使用了关键字,以下建议可供参考: select * from v$reserved_w ...

  5. 封装Vue Element的table表格组件

    上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...

  6. oracle ORA-01747(系统保留关键字)user.table.column, table.column 或列说明无效 hibernate映射oracle保留关键字

    1.查询系统关键 select * from v$reserved_words 确认你使用的是否为关键字: select * from v$reserved_words w where w.KEYWO ...

  7. Oracle报错：ORA-01747: user.table.column, table.column 或列说明无效

    1.检查sql书写正确性 2.如果sql书写正确,则是由于数据库列名起的不好引起的,名字用到了数据库的关键字. 如果列很多,又不好确定是哪个列名使用了关键字,以下建议可供参考: 我用以下方法定位 se ...

  8. WPF GridView的列宽度设置为按比例分配

    <Grid> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="3*" / ...

  9. tableLayoutPanel 列宽度设置

    public partial class UserControl1 : UserControl { public UserControl1() { InitializeComponent(); ].W ...

随机推荐

  1. 29. ClustrixDB 分布式架构/并发控制

    介绍 ClustrixDB使用多版本并发控制(MVCC)和2阶段锁(2PL)的组合来支持混合的读写工作负载.在我们的系统中,读取器享受无锁快照隔离,而写入器使用2PL来管理冲突.并发控制的组合意味着读 ...

  2. k8s-wordpress

    将数据库的密码写入wordpress的yaml配置文件不行,额外输入可以初始化数据成功,好奇怪 mysql 配置yamL cat mysql.yml --- apiVersion: apps/v1be ...

  3. Linux 系统中 grep 的ABC参数含义

    1.grep  -A  5   匹配行及后5行 2.grep  -B  5   匹配行及前5行 3.grep  -C  5   匹配行及前后各5行

  4. jquery focus()方法 语法

    jquery focus()方法 语法 作用:当元素获得焦点时,发生 focus 事件.大理石平台价格 触发focus事件语法:$(selector).focus() 将函数绑定到focus事件语法: ...

  5. 【清华集训2016】Alice和Bob又在玩游戏

    不难的题目.因为SG性质,所以只需要对一棵树求出. 然后如果发现从上往下DP不太行,所以从下往上DP. 考虑一个点对子树的合并,考虑下一个删的点在哪一个子树,那么剩下的状态实际上就是把一个子树所有能达 ...

  6. 导数与微分简单总结（updated）

    只讲一些导数在OI中的简单应用,特别基础的东西,不会很详细也不会很全面. 导数的定义 设函数\(y=f(x)\)在点\(x_0\)的某个邻域内有定义,当自变量\(x\)在\(x_0\)处有增量\(Δx ...

  7. 18.Python格式化字符串（格式化输出）

    Python 提供了“%”对各种类型的数据进行格式化输出,例如如下代码: price = 108 print ("the book's price is %s" % price) ...

  8. STCubeMX软件新建Keil和IAR工程使用步骤：

    STCubeMX软件新建Keil和IAR工程使用步骤:首先是软件下载(也可在我们的百度云下载):1.STCubeMX下载地址:    http://www.stmicroelectronics.co ...

  9. JS基础-连续赋值

    重点:先声明,从左向右,声明变量分配内存,后赋值,从右向左 问题 var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); cons ...

  10. Android学习_7/23

    1.        在活动中使用Menu 1)        什么是Menu? 2)        怎么实现? step1:res目录下创建Menu resource file,使用<item… ...