iview table 行高,iview table 高度自适应
本文主要介绍如何解决iView表格组件宽度只变大不变小的问题。有很好的参考价值，希望对大家有所帮助。来和边肖一起看看吧。
示例：
Table class=我的表/Table
其实打开开发者工具，可以发现iView在表格标签的宽度上加了一个确定的宽度值，而这个值在父元素变小的时候并没有相应减小，所以iView表格组件只会变大不会变小。
然后我们就可以根据这个原因来决定解决方案了。
1.为表格组件的表格标签设置一个重要的宽度。我的表表{
宽度：100%！重要；
}
这种方法不是特别好，因为可能会出现桌子慢慢变小(而不是瞬间变小)的情况，所以看起来不是特别好。
2.给表格组件一个特定的计算值。我的表{
宽度：calc(100%-100px)；
}
这个方法是我目前所知道的方法中最好的。
3.不要将宽度属性添加到表格组件的列参数中(未经验证)
列：[{
标题：标题，
宽度：200 //不要加这个东西
}]
这个方法是一个网友给的。没有验证过，也不知道有没有用。
补充知识：iview表格Table表头动态化实现
业务逻辑：根据日期时间，筛选跨度固定为3个月，获取数据，按月动态显示表格，显示图片。
形式还是那么简单。
Col span=8 时间：
Date-picker type= month format= yyyy-MM :clearable= false :editable= false :options= start option v-model= search params . sdate style= width:200 px /Date-picker emsp；致emsp
日期选择器type= month format= yyyy-MM :clearable= false :editable= false :options= end option v-model= search params . edate style= width:200 px /日期选择器
/Col
表条带：columns= Table columns :data= tableData /Table
思路：固定时间跨度监控解决方案不再赘述。搜索数据后，处理表格列，(推送、拼接、uhshift等。)来导致DOM刷新。
处理tableColumns的函数
这个。$utils.time.formatTime是封装的时间处理函数moment.js
//初始化标头
column sinit(){
设timeStr1=this。$ utils . time . format time(this . search params . sdate， YYYY-MM )
Let month=timestr1 每月维护企业数量
设timeStr2=this。$ utils . time . formataddtime(this . search params . sdate， YYYY-MM ，1， months )
设月中=时间tr2 每月维修企业数量
设timeStr3=this。$ utils . time . format time(this . search params . edate， YYYY-MM )
Endmonth=timestr3 每月维护企业
this.tableColumns.splice(3，4，
{
标题：开始月份，
对齐：“居中”，
render: (h，params)={
//不要直接看下面的业务逻辑
//console.log(timeStr1)
/* let arr=params . row . historydatalistdo []；
设obj=null
Arr.forEach((item，index)={//有些人，有些月份的数据没有
if (item.month==timeStr1) {
obj=arr[索引]
}
})
if (obj) {
返回h(a ，{
开：{
点击：()={
this.toDetail(params.row.uId，params.row.class2Id，obj.month，obj.month，obj.dirId)
}
}
}，obj.whsNum)
}否则{
返回h(span ，-)
}
*/业务逻辑
}
},
{
标题：月中，
对齐：“居中”，
render: (h，params)={
}
},
{
标题：月末，
对齐：“居中”，
render: (h，params)={
}
},
{
标题：“平均”，
对齐：“居中”，
关键字：“avgNum”
}
)
},
上面提到的iView表格组件宽度只会越来越小的问题的解决方案就是边肖分享的全部内容。希望给大家一个参考，多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。