当前位置：首页 > news >正文

uniapp中表格固定列（Vue）

news 来源：原创 2025/6/28 9:37:14

一、编写表格：

主要是使用了 position: sticky;进行固定，不要忘记写top/left/right/bottom的数值哦~

<template><view class="table-container"><uni-table stripe emptyText="暂无更多数据" ><!-- 表头行 --><uni-tr style="white-space: nowrap;"><uni-th align="left" width="103"><text class="tableTh">表头1</text></uni-th><uni-th align="left" width="58"><text class="tableTh">表头2</text></uni-th><uni-th align="left" width="80"><text class="tableTh">表头3</text></uni-th><uni-th align="left" width="72"><text class="tableTh">表头4</text></uni-th><uni-th align="left" width="96"><text class="tableTh">表头5</text></uni-th><uni-th align="left" width="82"><text class="tableTh">表头6</text></uni-th><uni-th align="left" width="44"><text class="tableTh">操作</text></uni-th></uni-tr><!-- 表格数据行 --><uni-tr  style="white-space: nowrap;" v-for="(item, index) in tableList" :key="index"><uni-td><text class="tableTd">{{ item.data1 }}</text></uni-td><uni-td><text class="tableTd">{{ item.data2 }}</text></uni-td><uni-td><text class="tableTd">{{ item.data3 }}</text></uni-td><uni-td><text class="tableTd">{{ item.data4 }}</text></uni-td><uni-td><text class="tableTd">{{ item.data5 }}</text></uni-td><uni-td><text class="tableTd">{{ item.data6 }}</text></uni-td><uni-td><text class="tableDetail" @click="goDetail(item)">详情</text></uni-td></uni-tr></uni-table></view>
</template><script>export default {data() {return {tableList: []}},onLoad() {// 初始化一下假数据this.tableList = []for(let i = 0; i < 20; i++) {let  obj = {}for(let j = 0; j < 6; j++) {obj[`data${j+1}`] = '这是数据数据数据数据' + parseInt(Math.random(0,1) * (j+1) * 10)}this.tableList.push(obj)}},methods: {goDetail() {console.log('点击详情')}}}
</script><style>.tableTh {font-weight: 600;font-size: 22rpx;color: #333!important;
}
.tableTd {font-weight: 400;font-size: 22rpx;color: #333;
}
.tableDetail {font-weight: 400;font-size: 22rpx;color: #3FA7FF;
}
.uniTdGz {font-weight: 400;font-size: 22rpx;color: #FF9A00;
}
.uniTdLx {font-weight: 400;font-size: 22rpx;color: #FF2828;
}
.table-container .uni-table-td {background: #fff!important;border-bottom: none!important;
}
.table-container .uni-table-th {background: #F8F8FA!important;border-bottom: none!important;
}
.table-container .uni-table-tr:nth-child(odd) {background: #F8F8FA!important;
}
.table-container .uni-table-th:nth-child(1),.table-container .uni-table-td:nth-child(1){position: sticky;left: 0;
}
.table-container .uni-table-th:last-child,.table-container .uni-table-td:last-child {position: sticky;right: 0;
}
</style>