问题

使用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. META标签的设置

    ㈠定义及用法 ⑴<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. ⑵<meta> 标签位于文档的头部,不 ...

  2. jquery preventDefault()方法 语法

    jquery preventDefault()方法 语法 作用:preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交).大理石平台价格 语法:event ...

  3. CF1101D GCD Counting 点分治+质因数分解

    题意:求最长的树上路径点值的 $gcd$ 不为 $1$ 的长度. 由于只要求 $gcd$ 不为一,所以只要 $gcd$ 是一个大于等于 $2$ 的质数的倍数就可以了. 而我们发现 $2\times 1 ...

  4. liunx系统中安装lua以及torch

    一直在用pytorch,最近在做项目的时候,遇到了torch的开源代码,所以又开始不得不接触torch以及他所依赖的环境lua. liunx下lua环境的配置代码如下: ''' curl -R -O ...

  5. pycharm2018.3 x64激活

    今天把pycharm从2018.2.4更新到了2018.3.7,需要重新激活,激活方式如下: 1.修改hosts文件,将下面两句话添加到hosts文件,保存 0.0.0.0 account.jetbr ...

  6. Python3 获取一大段文本之间两个关键字之间的内容

    用re或者string.find.以下是re代码 123456789101112131415import re#文本所在TXT文件file = '123.txt' #关键字1,2(修改引号间的内容)w ...

  7. QtQtConcurrent 使用方式

    说明:QtConcurrent 的线程函数启动方式略述. 1) 全局函数或静态函 ,作为线程函数 void threadFunc() { //...add } QtConcurrent::run(th ...

  8. Jmeter(四)Cookie管理器

    上一节中我们用Jmeter通过接口上传了一张图片到人人网,其中请求头中的Cookie是写死的,这个Cookie其实是登录成功后服务器返回给客户端的,客户端接收到这个Cookie后保存下来,在后续向服务 ...

  9. openwrt boot 启动出现的问题

    一.boot启动出现JFFS2挂载文件系统错误 问题排查: 1.固件问题. 2.刷机,写进去不完整. 3.flash有问题. 二.openwrt 进入web页面出错 解决方法: 1.SSH进去,先恢复 ...

  10. BZOJ 3836 Codeforces 280D k-Maximum Subsequence Sum (模拟费用流、线段树)

    题目链接 (BZOJ) https://www.lydsy.com/JudgeOnline/problem.php?id=3836 (Codeforces) http://codeforces.com ...