499全包网站建设,母婴网站源码,网站制作怎样容易,盐步网站制作效果图如下#xff1a; 思路#xff1a;
1.由于APP项目需要#xff0c;起初想去插件市场直接找现成的#xff0c;结果找了很久没找到合适的#xff08;有的不支持vue2有的不能都支持APP和小程序#xff09;
2.后来#xff0c;就只能去改uni-table源码了#xff0c;因… 效果图如下 思路
1.由于APP项目需要起初想去插件市场直接找现成的结果找了很久没找到合适的有的不支持vue2有的不能都支持APP和小程序
2.后来就只能去改uni-table源码了因为u-table不支持固定列。
直接上代码
注意需要动态计算表头高度
templateview classcontentuni-table reftable :loadingloading border stripe emptyText暂无更多数据view classtable-headeruni-truni-th width120 aligncenter classsticky-column名称/uni-thuni-th width100 aligncenter标签名/uni-thuni-th width100 aligncenterCNB-槽号-通道/uni-thuni-th width100 aligncenter量程/uni-thuni-th width100 aligncenter预警值/uni-thuni-th width100 aligncenter联锁值/uni-thuni-th width100 aligncenter程序停机点名/uni-thuni-th width180 aligncenter操作/uni-th/uni-tr/viewview classwarper :style{ maxHeight: calc(100vh - boxHeight rpx) }uni-tr v-for(item, index) in tableData :keyindexuni-td width120{{item.name }}/uni-tduni-td width100viewu-tag :textitem.tagname sizemini typeprimary/u-tag/view/uni-tduni-td width100view classname{{ item.passage }}/view/uni-tduni-td width100view{{ item.range }}/view/uni-tduni-td width100{{ item.prewarningValue }}/uni-tduni-td width100{{ item.interlockingValue }}/uni-tduni-td width100u-tag :textitem.programStop sizemini typewarning/u-tag/uni-tduni-tdview classuni-groupu-button classuni-button sizemini typeprimaryclickselectdetail(index,item)查看/u-button/view/uni-td/uni-tr/view/uni-table/view
/templatescriptimport tableList from /subRemoteOperate/untilMethods/table/tableList.js;export default {data() {return {loading: false,boxHeight: 0, // box盒子的高度tableData: tableList.data}},mounted() {this.getBoxHeight();},methods: {//获取盒子高度getBoxHeight() {uni.createSelectorQuery().in(this).select(.table-header).boundingClientRect(rect {if (rect) {this.boxHeight rect.height;}}).exec();},}}
/scriptstyle langscss scoped.content {width: 100%;height: 100vh;}.table-header {position: sticky;left: 0;top: 0;z-index: 99999;background-color: #fff;}//冻结表头第一列/deep/ .uni-table-tr .uni-table-td:first-child {position: sticky;left: 0;top: 0;background-color: #fff;z-index: 9999;}/deep/ .uni-table-tr {overflow: visible;background-color: #fff;}/deep/ .uni-table-tr .uni-table-th:first-child {position: sticky;left: 0;top: 0;background-color: #fff;z-index: 9999;}
/style
