2023年6月20日发(作者：)

elementuitablehtml,elementUI中的elTable实现原理分析elementUI中的elTable实现原理图上图是我们使⽤element table组件的⼀个常见场景，顶部固定，左侧列固定，右侧列固定，甚⾄底部⾏固定。这些特性对于展现数据，报表等是⾮常友好的⼀种⽤户体验。今天我们不谈elTable的使⽤，今天我们来谈⼀谈elTable功能实现的原理。第⼀步，我们就需要正常的展现这个table表格，td中的宽度⽤户设定多少就是多少，没设定就⾃动宽度。第⼆步，通过js操作dom，获取到这个table中，每⼀⾏的⾼度，每⼀列的宽度。第三步，实现table功能的的布局。这样，我们table布局就实现了。简单点实现的话，每⼀个块内都放置整个table，然后定义定⾼或者定宽。超出部分不展⽰。第四步，滚动条跟随滚动，如果有纵向滚动条，那么添加滚动事件，在滚动时，左侧，右侧固定列偏移对应的滚动值。横向滚动条类似。第五步，gutter，⽐如出现纵向滚动条时，内容去的table宽度⼩了⼀个滚动条的宽度，那么头部固定表格需要添加⼀个空td，设置宽度为滚动条宽度，才能与内容区table对齐。计算⽅法就是内容去table外层div的offsetWidth - clientWidth得到滚动条的宽度。gutter就是上图红框区域。综上所述，elementUI的elTable实现原理就是上⾯这⼏步骤。⽤途Vue中JSX使⽤绘制报表，此⽂章处就是⼀个使⽤的地⽅，对于复杂报表，不管是elementUI table，还是vxe-table都显得⽆能为⼒。这时候我们就可以使⽤更加灵活强⼤的render函数来实现功能了。但是如果客户需要表头固定，那么我们就需要⽤到上⾯的知识了。运⽤上述知识，我们就可以轻松实现表头固定的功能。export default{props:{lists:{type:Array,default:()=>{return [];}},tps:{type:Array,default:()=>{return ['银川','吴忠','⽯嘴⼭','中卫','宁东','固原'];}},//前五名加背景⾊five:{type:Boolean,default:false}},data(){return {gutter:0,}},computed:{dobleList(){let arr = [];for(let i =0 ;([i]);([i]);}return arr;}},mounted(){setTimeout(()=>{this.$nextTick(()=>{ter();});},500);},methods:{calGutter(){let cht = this.$Height;let tht = this.$Height;let owd = this.$Width;let cwd = this.$Width;if(tht<=cht){ = 0;}else{ =( owd - cwd -2) + 'px'}},gettClass(it,k){let cstr = '';if(&&>k){if([k].zbpm==1){cstr = 'rp-first';} else if (){switch([k].zbpm){case 2:case 3:case 4:case 5: cstr = 'rp-two';}}}return cstr;}},render(){return (

{(it=>{return

{it}})}{!=0?:""}{((it,i)=>{if(i%2==0){return ({i/2==1?专业管理:""}{ }得分{((t,k)=>{return

{&&>k?[k].zbdf:""}})}{>0?:""})}else{return (排名{((t,k)=>{return

{&&>k?[k].zbpm:""}})}{!=0?:""})}})}

{(it=>{return

{it}})}{((it,i)=>{if(i%2==0){return ({i/2==1?专业管理:""}{ }得分{((t,k)=>{return

{&&>k?[k].zbdf:""}})})}else{return (排名{((t,k)=>{return

{&&>k?[k].zbpm:""}})})}})})}}完整表头固定代码如上，我是采⽤了第⼆种⽅式，表头区域渲染了整个table的备份，只是设置了固定⾼度截图表头部分。算是偷懒的实现吧。/* 报表样式 */.rp-header{background:#e1e1e1;}.rp-table th,.rp-table td{text-align:center;line-height: 28px;font-size:13px;color:#0E0E0E;}.rp-noscroll{height:29px;overflow:hidden;top:0;left:0;right:0;position:absolute;z-index: 2;}.rp-table -first{background:#00A187;color:#fff;font-weight:bolder;}.rp-table -two{background:#31E4C7;color:#fff;}样式只要通过absolute定位就可以实现了。希望此⽂章对你能有所帮助。

2023年6月20日发(作者：)

elementuitablehtml,elementUI中的elTable实现原理分析elementUI中的elTable实现原理图上图是我们使⽤element table组件的⼀个常见场景，顶部固定，左侧列固定，右侧列固定，甚⾄底部⾏固定。这些特性对于展现数据，报表等是⾮常友好的⼀种⽤户体验。今天我们不谈elTable的使⽤，今天我们来谈⼀谈elTable功能实现的原理。第⼀步，我们就需要正常的展现这个table表格，td中的宽度⽤户设定多少就是多少，没设定就⾃动宽度。第⼆步，通过js操作dom，获取到这个table中，每⼀⾏的⾼度，每⼀列的宽度。第三步，实现table功能的的布局。这样，我们table布局就实现了。简单点实现的话，每⼀个块内都放置整个table，然后定义定⾼或者定宽。超出部分不展⽰。第四步，滚动条跟随滚动，如果有纵向滚动条，那么添加滚动事件，在滚动时，左侧，右侧固定列偏移对应的滚动值。横向滚动条类似。第五步，gutter，⽐如出现纵向滚动条时，内容去的table宽度⼩了⼀个滚动条的宽度，那么头部固定表格需要添加⼀个空td，设置宽度为滚动条宽度，才能与内容区table对齐。计算⽅法就是内容去table外层div的offsetWidth - clientWidth得到滚动条的宽度。gutter就是上图红框区域。综上所述，elementUI的elTable实现原理就是上⾯这⼏步骤。⽤途Vue中JSX使⽤绘制报表，此⽂章处就是⼀个使⽤的地⽅，对于复杂报表，不管是elementUI table，还是vxe-table都显得⽆能为⼒。这时候我们就可以使⽤更加灵活强⼤的render函数来实现功能了。但是如果客户需要表头固定，那么我们就需要⽤到上⾯的知识了。运⽤上述知识，我们就可以轻松实现表头固定的功能。export default{props:{lists:{type:Array,default:()=>{return [];}},tps:{type:Array,default:()=>{return ['银川','吴忠','⽯嘴⼭','中卫','宁东','固原'];}},//前五名加背景⾊five:{type:Boolean,default:false}},data(){return {gutter:0,}},computed:{dobleList(){let arr = [];for(let i =0 ;([i]);([i]);}return arr;}},mounted(){setTimeout(()=>{this.$nextTick(()=>{ter();});},500);},methods:{calGutter(){let cht = this.$Height;let tht = this.$Height;let owd = this.$Width;let cwd = this.$Width;if(tht<=cht){ = 0;}else{ =( owd - cwd -2) + 'px'}},gettClass(it,k){let cstr = '';if(&&>k){if([k].zbpm==1){cstr = 'rp-first';} else if (){switch([k].zbpm){case 2:case 3:case 4:case 5: cstr = 'rp-two';}}}return cstr;}},render(){return (

{(it=>{return

{it}})}{!=0?:""}{((it,i)=>{if(i%2==0){return ({i/2==1?专业管理:""}{ }得分{((t,k)=>{return

{&&>k?[k].zbdf:""}})}{>0?:""})}else{return (排名{((t,k)=>{return

{&&>k?[k].zbpm:""}})}{!=0?:""})}})}

{(it=>{return

{it}})}{((it,i)=>{if(i%2==0){return ({i/2==1?专业管理:""}{ }得分{((t,k)=>{return

{&&>k?[k].zbdf:""}})})}else{return (排名{((t,k)=>{return

{&&>k?[k].zbpm:""}})})}})})}}完整表头固定代码如上，我是采⽤了第⼆种⽅式，表头区域渲染了整个table的备份，只是设置了固定⾼度截图表头部分。算是偷懒的实现吧。/* 报表样式 */.rp-header{background:#e1e1e1;}.rp-table th,.rp-table td{text-align:center;line-height: 28px;font-size:13px;color:#0E0E0E;}.rp-noscroll{height:29px;overflow:hidden;top:0;left:0;right:0;position:absolute;z-index: 2;}.rp-table -first{background:#00A187;color:#fff;font-weight:bolder;}.rp-table -two{background:#31E4C7;color:#fff;}样式只要通过absolute定位就可以实现了。希望此⽂章对你能有所帮助。