问题

使用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. 批处理(.bat)文件使用笔记

    color: 一位参数时→改变字体颜色,例如 color a 就是修改字体为亮绿色. 两位参数时→改变背景和字体颜色,第一位参数为背景颜色值,第二位参数为字体颜色值. color [BF] B:背景颜 ...

  2. jprofiler 监听远程java项目

    1.下载.安装windows和linux版的jprofile.注意:若监控的是springboot.springcloud项目,切记本地和服务器上的jprofile要版本保持一致,本人亲自踩过坑. 官 ...

  3. C# 5.0

    序言 异步成员 但是 async 和 await 才是此版本真正的主角. C# 在 2012 年推出这些功能时,将异步引入语言作为最重要的组成部分,另现状大为改观. 如果你以前处理过冗长的运行操作以及 ...

  4. 收藏一个bit模板使用实例

    #include<bits/stdc++.h> using namespace std; typedef long long ll; #define MAX_N 1000000 int b ...

  5. 循环链表C语言实现

    按照单链表的设计,稍加改动.和单向链表不一样的地方,头节点不指向NULL,而是指向自己head 循环链表的判满 1)判断next是不是头结点,2)判断size /* * CycleLinkList.h ...

  6. erlang实现排列组合问题

    今天在公司做一个日志分析的任务,在做统计的时候,遇到这样一个问题, 之前已经将数据拆分好,出现这样一张中间表Table,简略写如下: A属性 B属性 C属性 D属性 1       3         ...

  7. CPU处理多任务——中断与轮询方式比较

    中断方式与轮询方式比较   中断的基本概念 程序中断通常简称中断,是指CPU在正常运行程序的过程中,由于预选安排或发生了各种随机的内部或外部事件,使CPU中断正在运行的程序,而转到为相应的服务程序去处 ...

  8. tomcat服务器经常需要重启

    程序看着运行正常,但是点击几下就没反应了. 可能原因:1.tomcat内存不足 2.程序中有资源未释放.比如session(hibernate的)等(需要close)

  9. 描述一下 Intent 和 IntentFilter?

    Android 中通过 Intent 对象来表示一条消息,一个 Intent 对象不仅包含有这个消息的目的地,还可以包含消息的内容,这好比一封 Email,其中不仅应该包含收件地址,还可以包含具体的内 ...

  10. CICD - 持续集成与持续交付

    持续集成与持续交付是软件开发和交付中的实践.我们项目中一直在践行持续集成(CI:Continuous Integration):持续交付(CD:Continuous Delivery)未能达到理想状态 ...