vue移动端表格,超出横向滚动,固定第一列
效果图html结构表格数据对应渲染功能实现思路:其实看代码就能了解了,就很简单的用循环数组,然后把数组中的每一项对应放在一个位置就行了。这样循环几个,就有几列数据,后台传过来的数据就分成两个,一个就是第一列的科目,另外的就是后面的每个人的名字和他的成绩,只需要循环放在对应位置<!-- 表格部分 --><div ><div><van-notice-
·
效果图
html结构
表格数据对应渲染功能实现思路:其实看代码就能了解了,就很简单的用循环数组,然后把数组中的每一项对应放在一个位置就行了。这样循环几个,就有几列数据,后台传过来的数据就分成两个,一个就是第一列的科目,另外的就是后面的每个人的名字和他的成绩,只需要循环放在对应位置
<!-- 表格部分 -->
<div >
<div>
<van-notice-bar
scrollable
style="margin-bottom: 10px; margin-left: 15px; width: 90vw"
left-icon="volume-o"
text="空白(没有参加) 横杠 (没有这项考试)"
/>
</div>
<!-- 表格部分 -->
<div class="result_wrap">
<div>
<div class="result_box aaa">
<p class="result_title result_bottom">科目 | 学员</p>
<p
class="result_title result_bottom"
v-for="(item, index) in result_analysis.subjectList"
:key="index"
>
{{ item.testSubjectName }}
</p>
</div>
<div class="bbb">
<div
class="result_box"
v-for="(item, index) in result_analysis.list_result_new"
:key="index"
>
<p class="result_title result_bottom">{{ item.name }}</p>
<!-- <p class="result_title">{{item.resultScore}}</p> -->
<p class="result_title">{{ item.yintixiangshang }}</p>
<p class="result_title">{{ item.fuwocheng }}</p>
<p class="result_title">{{ item.yangwoqizuo }}</p>
<p class="result_title">{{ item.lidingtiaoyuan }}</p>
<p class="result_title">{{ item.wangfanpao }}</p>
<p class="result_title">{{ item.changpao1200 }}</p>
<p class="result_title">{{ item.changpao800 }}</p>
</div>
</div>
</div>
</div>
</div>
css部分
.result_wrap {
width: 100%;
white-space: nowrap;
overflow: auto;
margin-top: 20px;
}
.result_box {
display: inline-block;
width: 105px;
border: solid #ccc 1px;
}
.result_title {
height: 40px;
border-bottom: solid 1px #ccc;
margin: 0;
text-align: center;
line-height: 40px;
font-size: 14px;
}
.aaa{position: fixed;z-index: 100;background-color: #fff;}
.bbb{margin-left: 105px;}
css让表格超出部分不换行并有滚动条实现核心思路:首先用浮动或者inline-block来让所有元素一行排列,这时候肯定排不下的会自动换行,我们就给父级盒子加个white-space: nowrap;强制一行排列,不让他换行,然后给宽度设置一个百分百,并给个overflow: auto;让他超出的隐藏并可以滚动。就搞定了。
表格第一列固定实现思路:很简单,就是给第一列的盒子单独加个固定定位就行了,然后用z-index让他显示在前面。这样滑动的时候不会被后面的表格覆盖住,然后给个底色让文字不会重叠看的明显一点,最后把除了第一列的其他列的父级盒子给个margin-left,值就是第一列的宽度,这样就不会第二列的因为第一列是定位脱离文档流被盖住了。
更多推荐
已为社区贡献17条内容
所有评论(0)