elementui table列宽自适应,vue table 宽度自适应
本文主要详细介绍Vue使用el-table实现自适应列宽。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了Vue使用el-table实现自适应列宽的具体代码，供大家参考。具体内容如下
主要思路：每次获取分页表数据时动态计算每列的列宽。
我的要求是自适应，没有水平滚动条，所以在计算出每一列的宽度后，把所有的列宽加起来得到总和，再把每一列的宽度除以总和得到每一列宽度的长度百分比。例如，将每列的宽度设置为width=10%。如果您想显示每一列的所有内容，并且不介意水平滚动条，只需使用计算出的列宽作为列宽，例如
以下是计算列宽的主要方法
这是后台返回给我的数据的格式。field0表示第一列，field1表示第二列，依此类推…
主要方法如下
//获取列表的总长度
getWidth (list，tableData2) {
//list是上图对应的表格字段名数据的cloumnList。
//tableData2是表格数据，对应上图中的列表。
this.allTotal=0
list.map((item，index)={
//这里根据自己的数据自己算
this . all total=this . flex column width(` field $ { index } `，tableData2)
})
},
//计算每列的列宽
flexColumnWidth (str，tableData，flag=max) {
//str是该列的字段名(传递字符串)；TableData是该表的数据源(传递的变量)；这里的Str是指姓名、身份证.
//tableData是表格内容。
//flag是可选值，所以可以传递这个参数。传递参数时可以选择 max 或 equal ，默认值为 max
//当flag为“max”时，列宽设置为适合列中最长的内容，当flag为“equal”时，列宽设置为适合列中第一行的长度。
str=str
让columnContent=
如果(！tableData ！table data . length table data . length===0 table data===undefined){
返回
}
如果(！str ！str . length str . length===0 str===undefined){
返回
}
if (flag===equal) {
//获取该列中的第一个非空数据(内容)
for(设I=0；I table data . length；i ) {
if (tableData[i][str]。长度0) {
//console . log( this column data[0]:，tableData[0][str])
column content=tableData[I][str]
破裂
}
}
}否则{
//获取该列中最长的数据(内容)
让索引=0
for(设I=0；I table data . length；i ) {
if (tableData[i][str]===null) {
tableData[i][str]=
}
const now _ temp=tableData[I][str]
const max _ temp=tableData[index][str]
if(现在临时长度最大临时长度){
指数=i
}
}
column content=tableData[index][str]
}
//console . log( this column data[I]:，columnContent)
//以下分配的单位长度可以根据实际需求进行调整。
设flexWidth=0
for(column content的const char
if((char= A char= Z ) (char= A char= Z ){
//如果是英文字符，给字符分配8个单位宽度。
弹性宽度=8
} else if(char= \ u4e 00 char= \ u9fa 5 ){
//如果是汉字，给字符分配15个单位宽度。
弹性宽度=15
}否则{
//其他种类的字符，给字符分配8个单位宽度。
弹性宽度=8
}
}
if (flexWidth 60) {
//设置最小宽度
柔性宽度=60
}
if (flexWidth 250) {
//设置最大宽度
弹性宽度=250
}
//console.warn(flexWidth)
返回弹性宽度
},
El表部件
el-table :data=tableData2
身高=515
force-scroll=垂直
style=宽度：100%
El-表格-列类型=选择/El-表格-列
el-table-column v-for=(item，index)in column list
:key=index
:prop=`field${index} `
//这里用每列的列宽除以总列宽，计算出列宽的百分比。
:width=tableData2.length0？(flexColumnWidth(`field${index} `，table data 2)/all total)* 100% :100
:label=item
/El-表格-列
/el-table
最后实现效果如图所示，满足表格列宽适配的要求。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。