iview 表格列宽自适应,
本文主要介绍如何解决iview表格组件中非自适应固定列表格的问题，具有很好的参考价值，希望对大家有所帮助。来和边肖一起看看吧。
当在使用iview Table组件里固定列功能时
表格宽度不适应的问题如下
要解决这个问题，只需将组件中的宽度改为minWidth。
列：[
{
标题：帐户名，
密钥：“帐户名”，
已修复：“左侧”，
最小宽度：150
},
{
标题：“订阅名称”，
密钥：订阅名称，
最小宽度：140
},
{
标题：“订阅ID”，
密钥：“subscriptionId”，
最小宽度：200
},
{
标题：“资源组”，
关键字：“资源组”，
最小宽度：140
},
{
标题：“实例名称”，
关键字：“实例名”，
最小宽度：140
},
{
标题：“实例类型”，
关键字：“实例类型”，
最小宽度：140
},
{
标题：“CPU”，
密钥：“cpu”，
最小宽度：140
},
{
标题：“内存(GB)”。
键：“内存”，
最小宽度：140
},
{
标题：“磁盘容量(GB)”。
关键字：“存储”，
最小宽度：140
},
{
标题：“操作系统”，
键：“操作系统”，
最小宽度：140
},
{
标题：“实例状态”，
关键字：“州名”，
最小宽度：140
},
{
标题：“项目”，
关键字：“项目”，
最小宽度：140
},
{
头衔：“所有者”，
关键字：“所有者”，
最小宽度：140
},
{
标题：“公共知识产权”，
关键字：“publicIp”，
最小宽度：140
},
{
标题：“私有IP”，
关键字：“privateIp”，
最小宽度：140
},
{
标题：“虚拟网络/子网”，
关键字：“virtualNetworkSubnet”，
最小宽度：140
},
{
标题：“网络安全组”，
密钥：“安全组”，
最小宽度：120
}
]
希望大家少走弯路~
补充知识：iView中table表格组件使用中的一些问题解决方法
最近，当显示层属性信息时，需要表格来显示所请求的属性信息。项目UI是iview，所以我从iview获取表格组件来使用。https://iviewui.com/components/table
最终产品就是这样一个组件。
iview的组件功能还是很强的，但是用起来也挺麻烦的。在设计这个表单的过程中，我遇到了两个困难。
一、怎么拆分以及合并部分单元格；
二、怎么调整某一个单元格的设计宽度；
首先，第一个问题，
属性span-method在UI中提供，用于指定合并行或列的算法。
该方法参数为 4 个对象：
行：当前行
列：当前列
RowIndex:当前行索引
ColumnIndex:当前列索引。
这个函数可以返回一个包含两个元素的数组，第一个元素表示rowspan，第二个元素表示colspan。还可以返回一个键名为rowspan和colspan的对象。
因为只有合并没有拆分，所以我会在原有列数的基础上再增加几列来满足拆分要求，行列数据会在data中声明。
列1: [
{
标题：姓名，
关键字：“名称”，
宽度：100
},
{
标题：“值”，
关键字：“值”，
宽度：88
},
{
标题：“其他1”，
关键：“其他1”
},
{
标题：“其他2”，
关键字：“其他2”，
resiable:真的，
宽度：88
},
{
标题：其他3 ，
关键：“其他3”
}
],
属性：[
{
名称：“层名称”，
数值：18
},
{
名称：基本地址，
价值：25
},
{
名称：“图层范围”，
值：疯丫头：，
其他1: ，
other2:minY:，
其他3: ，
cellClassName: {
值：“单元格宽度”，
其他2:“单元格宽度”
}
},
{
名称： maxX:，
值： ，
其他1:马克西：，
其他2: ，
cellClassName: {
名称：“单元格宽度”，
其他1:“单元格宽度”
}
},
{
名称：“字段”，
数值：26
},
{
名称：“空间参考”，
值：11
},
{
名称：“元素数量”，
价值：78
}
]
下一步是编写合并单元格的函数。api给出了一个演示代码，看起来不太好理解，但是总结一下，如果是用来记录单元格的序列号来开始操作，而不是做出判断。如果嵌套用于合并指定的行和列。
到这一步，我们已经基本完成了一般的表格。
接下来，第二个问题
我需要缩小字段较短的单元格的宽度。API中也有这些扩展属性，用于设置行、列和单元格的样式。
Row:可以通过属性row-class-name为行指定一个样式名。
列：可以通过设置列的字段className来指定列的样式。
单元格：通过为数据data设置字段cellClassName，可以为任何单元格指定样式。
但是我在项目中写的时候发现，它能改变的样式只有背景色、字体颜色等不影响盒子状态的属性。例如，宽度等属性即使在写入时也是无效的。调试了很久却一无所获，想用js写个函数改变宽度，于是在API里找到了。
因为我把表头藏起来了，使用的时候发现可以直接设置单元格宽度，问题就解决了。
总结一下：官方组件库中提供的API可以解决我们的大部分问题，所以当你遇到问题的时候，多看看官网，看能不能从不同的角度解决。
以上针对iview表格组件中非自适应固定列表格问题的解决方案，就是边肖分享的全部内容。希望能给你一个参考，多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。