效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/5e6cb1a645584c9dbf27b6bd1ab9465e.png
table组件代码
wxml文件
<!-- 表格 -->
<view class="table">
<scroll-view
enable-flex
scroll-y
scroll-x
style="height:{{height}}rpx; flex-direction: row;"
bindscrolltolower="handleScrollToLower"
class="{{border && 'table-container'}}"
>
<view style="width:{{width}}rpx">
<!-- 表头 -->
<view class="tr-th">
<view
wx:for="{{columns}}"
wx:for-item="column"
wx:key="index"
style="width:{{column.width || 200}}rpx"
class="{{border && 'th-border'}} th"
>{{column.title}}
</view>
</view>
<!-- 内容 -->
<!-- 除表头外纵向滑动 -->
<view class="tr" wx:for="{{tableData}}" wx:for-item="table" wx:key="index">
<view
style="width:{{columnItem.width || 200}}rpx"
class="{{border && 'td-border'}} td"
wx:for="{{columns}}"
wx:for-item="columnItem"
wx:for-index="columnIndex"
wx:key="columnIndex"
>
{{ table[columnItem.key] || '-'}}
</view>
</view>
</view>
</scroll-view>
</view>
wxss文件
/* 项目表格 */
.table {
position: relative;
background: #FFFFFF;
box-shadow: 0px 0px 10rpx 0px rgba(32,76,131,0.12);
border-radius: 20rpx ;
box-sizing: border-box;
padding: 40rpx 0rpx 0rpx 20rpx;
}
.table-container {
border: 1px solid #DBDBDB;
border-bottom: none;
}
.tr {
display: flex;
}
.tr-th {
display: flex;
position: sticky;
top: 0;
z-index: 99;
background: #fafafa;
}
.th{
padding: 10rpx;
border-bottom: 1px solid #DBDBDB;
text-align: center;
font-weight: bold;
font-size: 24rpx;
font-weight: 400;
color: #000000;
box-sizing: border-box;
}
.th-border {
border-right: 1px solid #DBDBDB;
}
.th:nth-child(1) {
position: sticky;
left: 0;
z-index: 99;
background: #fafafa;
}
.th:nth-child(2) {
position: sticky;
left: 80rpx;
z-index: 99;
background: #fafafa;
}
.td {
font-size: 22rpx;
font-weight: 400;
color: #666666;
padding: 10rpx;
border-bottom: 1px solid #DBDBDB;
text-align: center;
box-sizing: border-box;
}
.td-border {
border-right: 1px solid #DBDBDB;
}
.td:nth-child(1) {
position: sticky;
left: 0;
z-index: 80;
background: #FFFFFF;
}
.td:nth-child(2) {
position: sticky;
left: 80rpx;
z-index: 80;
background: #FFFFFF;
}
js文件
Component({
/**
* 组件的属性列表
*/
properties: {
columns: {
type: Array,
value: [
{
key: "catname",
title: "类目",
width: 80
},
{
key: "product_bar_code",
title: "条形码",
width: 150
},
{
key: "product_title",
width: 200,
title: "商品1"
},
{
key: "product_title",
width: 200,
title: "商品2"
},
{
key: "product_title",
width: 200,
title: "商品3"
},
{
key: "quantity",
width: 200,
title: "数量"
}
]
},
tableData: {
type: Array,
value: [
{
catname: 1,
product_bar_code: "1234567",
product_title: "可乐佛挡杀佛的范德萨范德萨手打放大放大",
quantity: "12"
},
{
catname: 2,
product_bar_code: "45633423",
product_title: "雪碧",
quantity: "23"
},
{
catname: 3,
product_bar_code: "3426767456",
product_title: "乐事",
quantity: "31"
},
{
catname: 4,
product_bar_code: "2345654",
product_title: "香草片",
quantity: "44"
},
{
catname: 5,
product_bar_code: "7654565",
product_title: "郁金香",
quantity: "55"
},
{
catname: 6,
product_bar_code: "345435",
product_title: "可口可乐",
quantity: "11"
},
{
catname: 7,
product_bar_code: "235436543",
product_title: "爱马仕",
quantity: "23"
},
{
catname: 8,
product_bar_code: "66543456",
product_title: "古驰",
quantity: "12"
},
{
catname: 9,
product_bar_code: "87656754",
product_title: "苹果",
quantity: "12"
},
{
catname: 10,
product_bar_code: "45678987654",
product_title: "栗子",
quantity: "42"
},
{
catname: 11,
product_bar_code: "4567765434",
product_title: "可水果乐",
quantity: "12"
},
{
catname: 12,
product_bar_code: "458765",
product_title: "翅果",
quantity: "42"
},
{
catname: 13,
product_bar_code: "34544",
product_title: "香蕉",
quantity: "45"
},
{
catname: 14,
product_bar_code: "345654324",
product_title: "相机",
quantity: "7"
},
{
catname: 15,
product_bar_code: "8986",
product_title: "渔家",
quantity: "8"
},
{
catname: 1,
product_bar_code: "1234567",
product_title: "可乐",
quantity: "12"
},
{
catname: 2,
product_bar_code: "45633423",
product_title: "雪碧",
quantity: "23"
},
{
catname: 3,
product_bar_code: "3426767456",
product_title: "乐事",
quantity: "31"
},
{
catname: 4,
product_bar_code: "2345654",
product_title: "香草片",
quantity: "44"
},
{
catname: 5,
product_bar_code: "7654565",
product_title: "郁金香",
quantity: "55"
},
{
catname: 6,
product_bar_code: "345435",
product_title: "可口可乐",
quantity: "11"
},
{
catname: 7,
product_bar_code: "235436543",
product_title: "爱马仕",
quantity: "23"
},
{
catname: 8,
product_bar_code: "66543456",
product_title: "古驰",
quantity: "12"
},
{
catname: 9,
product_bar_code: "87656754",
product_title: "苹果",
quantity: "12"
},
{
catname: 10,
product_bar_code: "45678987654",
product_title: "栗子",
quantity: "42"
},
{
catname: 11,
product_bar_code: "4567765434",
product_title: "可水果乐",
quantity: "12"
},
{
catname: 12,
product_bar_code: "458765",
product_title: "翅果",
quantity: "42"
},
{
catname: 13,
product_bar_code: "34544",
product_title: "香蕉",
quantity: "45"
},
{
catname: 14,
product_bar_code: "345654324",
product_title: "相机",
quantity: "7"
},
{
catname: 15,
product_bar_code: "8986",
product_title: "渔家",
quantity: "8"
}
]
},
// 表格高度
height: {
type: Number,
value: 500
},
// 表格宽度
width: {
type: Number,
value: 1030
},
border: {
type: Boolean,
value: true
}
},
options: {
styleIsolation: "apply-shared",
multipleSlots: true
},
lifetimes: {
attached: function () {
// 在组件实例进入页面节点树时执行
// console.log(this.properties.columns[3].format(-1));
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
}
},
/**
* 组件的初始数据
*/
data: {},
/**
* 组件的方法列表
*/
methods: {
handleScrollToLower(e) {
if (e.detail.direction === "bottom") {
console.log(e)
this.triggerEvent("openMore")
}
}
}
})
json文件
{
"component": true,
"usingComponents": {
}
}