问题

使用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. JavaWeb_(SSH论坛)_七、辅助模块

    基于SSH框架的小型论坛项目 一.项目入门 传送门 二.框架整合 传送门 三.用户模块 传送门 四.页面显示 传送门 五.帖子模块 传送门 六.点赞模块 传送门 七.辅助模块 传送门 为避免代码冗余, ...

  2. JS框架_(AJAX)检测ip和地区

    百度云盘 传送门  密码:l94p 实现效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  3. python 安装-ERROR---Unable to find vcvarsall.bat

    系统配置:Windows10 x64, Visual Studio 2017, Python2.7.1 报错信息:error: Unable to find vcvarsall.bat 报错原因:在生 ...

  4. 安装OpenCV 3 on Raspbian Jessie

    环境: 硬件:树莓派三代B型, 5MP Camera Board Module 软件:Raspbian,Opencv 安装依赖 $ sudo apt-get update   $ sudo apt-g ...

  5. Thrift支持的基本数据类型

    'bool' | 'byte' | 'i8' | 'i16' | 'i32' | 'i64' | 'double' | 'string' | 'binary' | 'slist'(deprecated ...

  6. Vue.js---配置开发环境

    首先安装Node.js我就不介绍了! win+r , 输入cmd,回车: 1.安装淘宝镜像 在国内直接使用npm的官方镜像是比较慢的,这里我们采用的是淘宝镜像 npm install -g cnpm ...

  7. 排序算法（C++）

    冒泡排序.选择排序.快速排序.插入排序.希尔排序.归并排序.基数排序.堆排序. 推荐网址1:https://www.cnblogs.com/onepixel/articles/7674659.html ...

  8. java自定义classloader引发的思考

    引用 java类的热替换 classloader机制 如下图所示,java的classloader是双亲委派机制.会首先从父classloader加载指定的class,如果加载不到才会从子classl ...

  9. leetcode-easy-others-190. Reverse Bits-NO

    mycode 不会... 参考: 1. 思路: 将十进制的n转换成二进制(str) -> 利用切片.反向获取不包含0b的反转后的二进制字符串 -> 补上0(共32位) 2. class S ...

  10. 降级、熔断、限流[z]

    [z]https://juejin.im/post/5cced96e6fb9a032514bbf94当我们的系统的访问量突然剧增,大量的请求涌入过来,最典型的就是秒杀业务了,我们可能会知道会有一波高峰 ...