1.用table的样式写,推荐用这种写比较方便
<template>
<view>
<h3 style="text-align: center;">用 table 样式写</h3>
<view style="margin: 20upx;">
<scroll-view scroll-x="true" scroll-y="true"
style="border: 1upx solid #eee; width: 100%;height: 400upx;" @scrolltolower="lower">
<view class="table" :style="[{'width':tableWidth()}]">
<!-- 表头 -->
<!-- 固定列样式用title-cell-left 或 title-cell-right -->
<view class="table-header">
<view :class="item1.type" :style="[{'width':item1.width + 'upx'}]" v-for="(item1,index1) in headerList" :key="index1">
<view class="cell ">{{item1.title}}</view>
</view>
</view>
<!-- 数据行 -->
<view class="table-body">
<view class="table-tr" v-for="(item2,index2) in dataList" :key="index2">
<view :class="headerList[0].type" :style="[{'width':headerList[0].width + 'upx'}]">
<view class="cell ">{{item2.id}}</view>
</view>
<view :class="headerList[1].type" :style="[{'width':headerList[1].width + 'upx'}]">
<view class="cell " style="text-align: center;">{{item2.name}}</view>
</view>
<view :class="headerList[2].type" :style="[{'width':headerList[2].width + 'upx'}]">
<view class="cell ">{{item2.address}}</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
headerList:[
{
title:'id',
width: 100,
type:'title-cell-left'
},
{
title:'姓名',
width: 200,
type:'content-cell'
},
{
title:'地址',
width: 600,
type:'content-cell'
}
],
dataList:[
{
id:'001',
name:'张三',
address:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
},
{
id:'002',
name:'张三',
address:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
},
{
id:'003',
name:'张三',
address:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
},
{
id:'004',
name:'张三',
address:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}
],
}
},
created() {
this.tableWidth()
},
methods: {
//计算表格宽度
tableWidth() {
let width = 0;
this.headerList.forEach(item => {
width += item.width ;
})
return width + 'upx';
},
//滚动到底部加载下一页
lower(){
}
}
}
</script>
<style lang="scss" scoped>
$border-color: #E4E4E4;
$border: 1rpx solid $border-color;
$white: #FFFFFF;
$title-color: #f8f8f8;
.table {
display: table;
.table-header {
background-color: $title-color;
position: sticky;
top: 0;
z-index: 2;
.title-cell{
display: table-cell;
border: $border;
text-align: center;
position: relative;
vertical-align: middle;
}
.title-cell-left {
border: $border;
position: relative;
position: sticky;
left: 0;
z-index: 1;
text-align: center;
background-color: $title-color;
}
.title-cell-right{
border: $border;
position: relative;
position: sticky;
right: 0;
z-index: 1;
text-align: center;
background-color: $title-color;
}
.content-cell {
border-top: $border;
border-bottom: $border;
border-right: $border;
text-align: center;
}
}
.table-body {
.table-tr {
display: table-row;
.title-cell{
display: table-cell;
border-left: $border;
border-right: $border;
border-bottom: $border;
vertical-align: middle;
}
.title-cell-left {
border-left: $border;
border-right: $border;
border-bottom: $border;
position: sticky;
left: 0;
z-index: 1;
background-color: white;
}
.title-cell-right {
border-left: $border;
border-right: $border;
border-bottom: $border;
position: sticky;
right: 0;
z-index: 1;
background-color: white;
}
.content-cell {
border-bottom: $border;
border-right: $border;
}
}
}
.title-cell-left,.title-cell-right{
display: table-cell;
vertical-align: middle;
}
.content-cell {
display: table-cell;
vertical-align: middle;
}
.cell {
padding: 10rpx;
line-height: 1.6;
word-wrap: break-word;
word-break: break-all;
}
}
</style>
2.table
(1)固定列需要计算下left多少或者right多少
(2)固定列后border会变成透明,可以用css的outline(轮廓线)样式实现,outline是不占空间的
<template>
<view>
<h3 style="text-align: center;"> table</h3>
<view style="margin: 20upx;">
<scroll-view scroll-x="true" scroll-y="true"
style="border: 1upx solid #eee; width: 100%;height: 250upx;" >
<view class="table-y">
<table :style="[{'width':tableWidth()}]" >
<thead>
<tr >
<th class="table-th"
:style="[{'width':item3.width + 'upx',
'left':(item3.left ? item3.left + 'upx':''),
'z-index':(item3.left ? 80 :20)
}]"
v-for="(item3,index3) in headerList1" :key="index3">
{{item3.title}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item4,index4) in dataList1" :key="index4">
<td :style="[{'width':headerList1[0].width + 'upx',
'left':(headerList1[0].left ? headerList1[0].left + 'upx':''),}]"
:class="headerList1[0].left ? 'table-td-left':''">
{{item4.id}}
</td>
<td :style="[{'width':headerList1[1].width + 'upx',
'left':(headerList1[1].left ? headerList1[1].left + 'upx':''),}]"
:class="headerList1[1].left ? 'table-td-left':''">
{{item4.name}}
</td>
<td :style="[{'width':headerList1[2].width + 'upx'}]">
{{item4.address}}
</td>
</tr>
</tbody>
</table>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
headerList1:[
{
title:'id',
width: 100,
type:'title-cell-left',
left:'1'
},
{
title:'姓名',
width: 120,
type:'content-cell',
left:'101' //table自带的样式导致由111变成了117
},
{
title:'地址',
width: 600,
type:'content-cell'
}
],
dataList1:[
{
id:'001',
name:'李四',
address:'xxxxxxxxxxxxxxxxxxxxxx'
},
{
id:'002',
name:'李四',
address:'xxxxxxxxxxxxxxxxxxxxxx'
},
{
id:'003',
name:'李四',
address:'xxxxxxxxxxxxxxxxxxxxxx'
},
{
id:'004',
name:'李四',
address:'xxxxxxxxxxxxxxxxxxxxxx'
}
]
}
},
created() {
this.tableWidth()
},
methods: {
//计算表格宽度
tableWidth() {
let width = 0;
this.headerList1.forEach(item => {
width += item.width ;
})
return width + 'upx';
},
}
}
</script>
<style lang="scss" scoped>
.table-y{
table{
border-right: 1upx solid #000;
border-bottom: 1upx solid #000;
border-spacing: 0;
border-collapse: collapse;
}
table td {
border-left: 1upx solid #000;
border-top: 1upx solid #000;
text-align: center;
border-right: 1upx solid #000;
height: 100%;
}
.table-th{
position: sticky;
top: 1upx;
background-color: #eee;
border: none;
outline-color: #000;
outline-style: solid;
outline-width: 1upx;
}
.table-td-left{
position: sticky;
background-color: white;
border: none;
outline-color: #000;
outline-style: solid;
outline-width: 1upx;
z-index: 70;
}
}
</style>