Vue +原生固定table表头,body上下滚动,内容对应与横向滚动条
描述:根据返回数据动态渲染table数据,表头数量不确定(属性不确定或者说是多少列不确定),这样的话就排除了手动设置列宽的做法,每列平均分也并不可取(有点丑);然后将body数据设置动态高度,超出设置为滚动条。其实table的x轴也可以设置成超出滚动条,这样的话,就自定义了个表头固定,表体滚动显示,这个table x轴超出滚动。解决思路1、采用两个table列表,他们的数据一模一样,以保证他们的高
描述:
根据返回数据动态渲染table数据,表头数量不确定(属性不确定或者说是多少列不确定),这样的话就排除了手动设置列宽的做法,每列平均分也并不可取(有点丑);然后将body数据设置动态高度,超出设置为滚动条。其实table的x轴也可以设置成超出滚动条,这样的话,就自定义了个表头固定,表体滚动显示,这个table x轴超出滚动。
解决思路
1、采用两个table列表,他们的数据一模一样,以保证他们的高、宽、内容全部都完全一致;
2、table2采用定位的方法与table1两个列表完全重合(table2必须在上面,就是层级),table1的thead部分正常显示,table2的thead将其opacity:设置为0,height设置0;其中的tr th 的height也设置为0;
目的是将其table2的thead隐藏,切不可将display设置为none(会出现table1、与table2的内容不能一一对应);
如:
.table2 {
border-top: 0;
border-bottom: 0;
thead {
opacity: 0;
height: 0;
tr {
height: 0;
th {
height: 0;
line-height: 0;
}
}
}
}
3、在table2的外面设置个div盒子,将第二步的定位换到这个div上(这样不一步到位是方便理解),使用定位top属性控制table2的tbody与其table1的tbody重合(就是thead的高度),再将table1的tbody的opacity设置为0(即:工具人理解);
div在于动态控制table2的动态超出纵向滚动条,设置其相较于父级的最大高度超出显示滚动条,因为table2的thead已经隐藏了,height为0了,所以整个table的高度即为table2的tbody的高度,滚动显示的内容即为只有tbody的内容。
即:如果只需要实现固定表头,tbody滚动就到此为止了;
部分参考代码代码如下(仅供参考):
<div class="table">
<table class="table1" v-if="item.list&&item.list.length>0">
<thead>
<tr>
<th v-for="(item,key,index) in item.properties" :key="index">{{key}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in item.list" :key="index">
<td v-for="(item,key,index) in item" :key="index">{{item}}</td>
</tr>
</tbody>
</table>
<div class="table2BBox">
<table class="table2" v-if="item.list&&item.list.length>0">
<thead>
<tr>
<th v-for="(item,key,index) in item.properties"
:key="index" :title="key">{{key}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in item.list" :key="index">
<td v-for="(item,key,index) in item" :key="index":title="item"
>{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
.table2BBox {
min-width: 100%;
position: absolute;
top: 0;
left: 31;//thead高度
max-height: calc(100% - 31px);
overflow: hidden;
border-top: 1px solid #0c6c8b;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
.table2 {
border-top: 0;
border-bottom: 0;
thead {
opacity: 0;
height: 0;
tr {
height: 0;
th {
height: 0;
line-height: 0;
}
}
}
tbody {
}
}
}
}
效果如图:
补充
如想要实现横向滚动条,需要在两个table外面设置一div,仅仅只管横向滚动条即可;
如:
.table {
max-height: 100%;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid #0c6c8b;
}
效果如图:
更多推荐
所有评论(0)