问题

使用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. OpenCV笔记（3）(Canny边缘检测、高斯金字塔、拉普拉斯金字塔、图像轮廓、模板匹配)

    一.Canny边缘检测 Canny边缘检测是一系列方法综合的结果.其中主要包含以下步骤: 1.使用高斯滤波器,平滑图像,滤除噪声. 2.计算图像中每个像素点的梯度强度和方向. 3.应用非极大值抑制(N ...

  2. sh_01_列表基本使用

    sh_01_列表基本使用 name_list = ["zhangsan", "lisi", "wangwu"] # 1. 取值和取索引 # ...

  3. JS Module

    JS Module Summary I. Why we need to use the Module? In the past, Javascript can execute independentl ...

  4. 不错的图表库：ChartDirector

    官网:http://www.advsofteng.com 1)for c++ 2)for .NET 3)for Java 4)for ASP/COM/VB 5)for PHP 6)for Python ...

  5. Spark-PySpark sql各种内置函数

    _functions = { 'lit': 'Creates a :class:`Column` of literal value.', 'col': 'Returns a :class:`Colum ...

  6. 分布式-信息方式-ActiveMQ的Message dispatch高级特性之(指针) Message cursors

    Message dispatch高级特性之 Message cursors概述            ActiveMQ发送持久消息的典型处现方式是:当消息的消费者准备就绪时,消息发送系统把存储的 消息 ...

  7. Mac安装ipython与jupyter

    Python从Python发展而来,更倾向于科学计算.互联网数据分析更喜欢用. 首先切换root用户: sudo su - pip3自动安装ipython yuchaodeMacBook-Pro:~ ...

  8. C++入门经典-例6.7-字符串比较

    1:strcmp函数,用于比较两个字符串.格式如下: strcmp(字符数组名1,字符数组名2) 按照ASCII码,按顺序比较两个数组中的字符,并由函数返回值返回比较结果的执行过程. (1)各自选中自 ...

  9. 阿里镜像源配置yum

    通过more /etc/*release* 查看系统版本 (需要下载对应的系统版本) mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/Cen ...

  10. kotlin之字符串

    在kotlin 中 使用String 表示字符串类型,如下二类字符串 一 普通字符串 var s1 = "hello world" 二 保留原始格式的字符串 var s2 = &q ...