前言

uni-app 插件市场各类table插件挺多的，基本上我都下载试了个遍，最后各有各的不满意还是自己撸了一个，自己也试了好几种布局方式，做了好几款demo都不满意，只到改了一款可以左右列固定根据tableHead批量遍历渲染数据的table

最重要一点是项目是 uni-app 打包成 ios或android -app项目，而该类项目不支持 :class :style 动态样式绑定

一、思路

首先功能需求是根据tableHead可以批量渲染数据、左右列（左侧序号列及扩展固定列，右侧操作功能列）可以固定

本来先尝试做了几种比如 tr内部分左中右布局，这样左右行高可以随中部数据行高相同，但左右列尝试各种css样式布局都不成功，及 ios或android打包项目不支持 :class :style 动态样式绑定只好作罢

而后尝试分三个table 方式制作成功

二、代码

1.布局

<!-- table --><view class="table-wrapper"><view ref="table" class="my-table mb10"><view class="left-table" v-if="isTableLeftFlag"><thead class="table-head"><tr><th class="table-left-float" v-if="isTableNumberSortFlag"><view class="my-td-p w50">order</view></th></tr></thead><tbody class="table-body" v-if="tableList.length > 0"><tr class=""  v-for="(row,index) in tableList" :key="index"><td class="table-left-float" v-if="isTableNumberSortFlag"><view class="my-td-p w50">{{index+1}}</view></td></tr></tbody><tbody class="table-body" v-else><tr class="table-left-float" colspan="1"><td colspan="1"><view class="my-td-p">1</view></td></tr></tbody></view><view class="center-table"><thead class="table-head"><tr><th class="table-center-float" v-for="(header,index) in tableHead" :key="index"><view class="my-td-p " v-if='header.key ==="id"'>{{header.title}}</view><view class="my-td-p " v-else-if='header.key === "operator"'>{{header.title}}</view><view class="my-td-p " v-else-if='header.key === "modifyTime"'>{{header.title}}</view><view class="my-td-p " v-else>{{header.title}}</view></th></tr></thead><tbody class="table-body" v-if="tableList.length > 0"><tr class="table-content" v-for="(row,index) in tableList" :key="index"><td class="table-center-float" v-for="(item3,index3) in tableHead" :key="index3"><view class="my-td-p " v-if='item3.key ==="id"'>{{row[item3.key]}}</view><view class="my-td-p " v-else-if='item3.key === "operator"'>{{row[item3.key]}}</view><view class="my-td-p " v-else-if='item3.key === "modifyTime"'>{{row[item3.key]}}</view><view class="my-td-p " v-else>{{row[item3.key]}}</view></td></tr></tbody><tbody class="table-body" v-else><tr colspan="3"><td colspan="3"><view class="my-td-p">No data available</view></td></tr></tbody></view><view class="right-table" v-if="isTableRightFlag"><thead class="table-head"><tr><th class="table-left-float"><view class="my-td-p">operate</view></th></tr></thead><tbody class="table-body" v-if="tableList.length > 0"><tr class=""  v-for="(row,index) in tableList" :key="index"><td class="table-right-float"><view class="my-td-p w100"><!--     <text @click="editBtn(row)" class="mr10 c-01a4f6">编辑</text> --><text @click="deleteBtn(row)" class="c-01a4f6">删除</text></view></td></tr></tbody><tbody class="table-body" v-else><tr colspan="1"><td class="table-right-float" colspan="1"><view class="my-td-p">删除</view></td></tr></tbody></view></view><!-- 分页 --></view>

2.js

指定几个字段固定在左列，这个功能有实现但这偷个懒就不放了，批量勾选项也是；

<script>
const defaultTableHead = [// { key: 'id', title: 'id', width: '160' },{ key: 'parcelNo', title: 'parcelNo', width: '160' },// { key: 'warehouseId', title: '仓库id', width: '160' },{ key: 'status', title: 'status', width: '100' },{ key: 'remark', title: 'remark', width: '100' },{ key: 'operator', title: 'operator', width: '100' },{ key: 'createTime', title: 'createTime', width: '200' },{ key: 'modifyTime', title: 'modifyTime', width: '200' },]const MockTableList = [{ operator: '客户1打好后爱上撒配合', id: '00001', remark: '3', status: '1',modifyTime: '2020-09-10 22:10:00',createTime: '2020-09-10 22:10:00',parcelNo:'01',warehouseId:'01'},{ operator: '客户2间回到还是都定好i但是', id: '00002', remark: '9', status: '0',modifyTime: '2020-09-10 22:10:00',createTime: '2020-09-10 22:10:00',parcelNo:'01',warehouseId:'01'},{ operator: '客户3', id: '00003', remark: '6', status: '1',modifyTime: '2020-09-10 22:10:00',createTime: '2020-09-10 22:10:00',parcelNo:'01',warehouseId:'01'},{ operator: '客户4', id: '00004', remark: '6', status: '1',modifyTime: '2020-09-10 22:10:00',createTime: '2020-09-10 22:10:00',parcelNo:'01',warehouseId:'01'},{ operator: '客户5', id: '00005', remark: '6', status: '1',modifyTime: '2020-09-10 22:10:00',createTime: '2020-09-10 22:10:00',parcelNo:'01',warehouseId:'01'},];
export default {data() {// idKey: 'id', // list的唯一主键tableHead: defaultTableHead,tableList: MockTableList,tableLoading: false,// selectRow: [], // table选中数组isTableNumberSortFlag: true,isTableLeftFlag: true, // 默认开启左侧 序号 固定列isTableRightFlag: true, // 默认开启右侧 操作 固定列},methods: {deleteBtn(item,index) {console.log('deleteBtn()-item', item);const nowList = this.tableListthis.tableList = nowList.splice(index, 1)// this.getList()},}
}

3.css

<!-- table- 三个左种右分table 时 样式  -->
<style scoped>/* 去掉表格的重复边框 */table::-webkit-scrollbar {display: none;}th{overflow: hidden;}td{overflow: hidden;}.table-wrapper{padding: 0 10rpx;}/* 表头 */.table-head {overflow: hidden;text-align: center;white-space: nowrap;}.table-body{text-align: center;overflow-x: scroll;min-height: 600rpx;/* height: 600rpx; */overflow-y: scroll;}.table-content{overflow-x: scroll;min-height: 600rpx;}.my-table{overflow-y: scroll;border-collapse:collapse;border-spacing:0; position: relative;text-align: center;display: flex;align-items: center;justify-content: flex-start;}.left-table{z-index: 3;background-color: #fff;position: relative;float: left;}.center-table{z-index: 1;background-color: #fff;position: relative;float: left;width: 100%;overflow: scroll;}.right-table{z-index: 3;background-color: #fff;position: relative;float: left;}.table-left-float{/* float: left; *//* position: absolute;left:6rpx; */background-color: #fff;border-left: 2rpx solid #dedede;border-right: 2rpx solid #dedede;z-index: 2;}.table-center-float{border-left: 2rpx solid #dedede;border-right: 2rpx solid #dedede;}.table-right-float{/* float: right; *//* position: absolute;right:6rpx; */background-color: #fff;border-left: 2rpx solid #dedede;border-right: 2rpx solid #dedede;z-index: 2;}tr{width: 100%;/* border: 2rpx solid #dedede; */border-top: 2rpx solid #dedede;border-bottom: 2rpx solid #dedede;}.my-td-p{white-space: nowrap; /*  重点控制 字符不能换行，不然样式飞了 */text-align: center;/* height: 80rpx; */display: inline-block;line-height: 40rpx;padding: 4rpx 4rpx;margin: auto 0;vertical-align: middle;overflow: hidden;min-width: 100rpx;/* white-space:normal; */}
</style>
<!-- 本页面用到个人 common公共样式  -->
<style scoped>.mb5{margin-bottom: 10rpx;}.mb10{margin-bottom: 20rpx;}.w50{width: 100rpx;}.w100{width: 200rpx;}.c-01a4f6{color:#01a4f6 ;}
</style>

uni-app 自定义table-demo 左右列固定冻结相关推荐

bootstrap table 怎么实现前两列固定冻结？
$("#Table").bootstrapTable('destroy').bootstrapTable({pagination: true,//分页minimumCountCol ...
uni app 自定义头部组件（2）局部右侧按钮
上一篇为完全的自定义头部链接:https://blog.csdn.net/qq_37403179/article/details/102955419 本片则是使用uniapp已有的自定义方法给头部添 ...
js实现表格首行首列固定滑动
js+css实现table首行首列的冻结效果. 这个方案是把表格分为4块,首行首列不可滑动,利用onscroll 动态根据内容设置冻结首行首列内容. html <div id="lef ...
elementui表格中tip设置_Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用...
{column}) { return h( 'div',// 添加选中事件select (data) { console.log(data);}... 效果如下: 3.在表头添加一个Tooltip 我 ...
使用ant design的table控件最后一列固定（fixed）遇到的问题
工作以来一直在做2b的项目,因此表单操作,权限设置,一些业务逻辑就做的比较多. 首先介绍下背景:前后端完全分离,前端技术栈使用react+redux+antd,经常是没有视觉设计,全凭产品需求文档·· ...
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table_ ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
element table 合计第一行固定列
element table 合计第一行在这位大哥这里学来的, 但同时我这边的情况是: 固定高度, 第一列固定, 参数多, 因此, 这个方法不能够完全满足, 因此加入以下代码: 代码作用: 在每次获 ...

uni-app 自定义table-demo 左右列固定冻结

前言