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(){
gutter:0,
}
},
computed:{
dobleList(){
let arr = [];
for(let i =0 ;i
arr.push(this.lists[i]);
arr.push(this.lists[i]);
}
return arr;
}
},
mounted(){
setTimeout(()=>{
this.$nextTick(()=>{
this.calGutter();html横向滚动条样式
});
},500);
},
methods:{
calGutter(){
let cht = this.$lientHeight; let tht = this.$refs.tbs.offsetHeight; let owd = this.$ffsetWidth; let cwd = this.$lientWidth; if(tht<=cht){
this.gutter = 0;
}else{
this.gutter =( owd - cwd -2) + 'px'
}
},
gettClass(it,k){
if(it.value&&it.value.length>k){ if(it.value[k].zbpm==1){
cstr = 'rp-first';
} else if (this.five){
switch(it.value[k].zbpm){
case 2:
case 3:
case 4:
case 5: cstr = 'rp-two';
}
}
}
return cstr;
}
},
render(){
return (
{
this.tps.map(it=>{
return
{it}
})
}
{
this.gutter!=0?
:""
}
{
this.dobleList.map((it,i)=>{
if(i%2==0){
return (
{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。