问题

使用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. jquery error()方法 语法

    jquery error()方法 语法 作用:当元素遇到错误(没有正确载入)时,发生 error 事件.error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数.该方法是 ...

  2. css grid 随笔

    原文出自Arien的博客https://www.w3cplus.com/css3/line-base-placement-layout.html 首先定义一个网格 1.可以给父容器的display属性 ...

  3. the nearest point/vertex point of linestring

    引用https://github.com/Toblerity/Shapely/issues/190 snorfalorpagus commented on 18 Oct 2014 The point ...

  4. python3基础：基本语句

    http://www.cnblogs.com/qq21270/p/4591318.html  字符串.文本文件 http://www.cnblogs.com/qq21270/p/7872824.htm ...

  5. mybatis invalid bound statement (not found)

    Spring boot + Mybatis : Invalid bound statement (not found) 如果只在启动类上配置@MapperScan注解,默认只扫描和mapper接口同名 ...

  6. 51Nod 1005 有负数的高精度加法

    51Nod是个好地方啊 题意 51Nod基础题第二题,高精度加法,可能有负数. 解题 如果按照一般的高精度,我们发现要分情况讨论,还要写高精度加法和减法,代码实现有点烦.而初中数学里说,省略加号的和. ...

  7. 9.Python关键字（保留字）一览表

    保留字是 Python 语言中一些已经被赋予特定意义的单词,这就要求开发者在开发程序时,不能用这些保留字作为标识符给变量.函数.类.模板以及其他对象命名. Python 包含的保留字可以执行如下命令进 ...

  8. 实体字符转换,同样变量密码加盐MD5后生成的加密字符串不同解决办法 (原)

    我是首次登录系统自动生成一个密码,格式大概是:   abcd1234&  这种格式 , 比如加密规则就是一个 MD5() 然后,首次账号密码登录,输入密码 abcd1234&,一直提示 ...

  9. auth 认证组件的补充

    Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Djang ...

  10. shiro所需的依赖

    <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-spring< ...