博客

需求

今天领导提了个需求, 表格需要在纵表和横标之间转换, 并且,

可以固定左边第一列和上边第四行

, 用过table组件的都知道, 固定列很正常, 固定行我还没见过, 研究了一番, 发现事件也挺简单, 具体实现代码, 诸君请往下看.

解决思路

1. 表格加载完毕后, 通过js给tr追加css样式
2. js追加css关键属性: position: ‘sticky’, 这个定位的大概意思就是, 在当前的盒子里保持类似 position: ‘fixed’的功能,
   
   也就是滚动条出现后, 它能始终保持在固定位置,
   
3. 获取前四行的高度, 依次累加给前四行的top赋值
4. 不多解释了
   
   ,
   
   具体大家
   
   百度
   
   必应吧, 值得一提的是element table的固定列功能也是用了这个属性
5. 代码不复杂, 有更好的办法, 或者有问题都可以联系我

具体代码

getList() {
      //获取数据后, 执行以下方法
      setTimeout(() => {
        this.rowTable()
      })
    },

    rowTable(){
      this.$nextTick(() => {
        const tableRows = document.querySelectorAll('tr');
        let top = 0;
        tableRows.forEach((item, index) => {
            //前四行固定
            if(index < 4){
              item.style.position = 'sticky'
              item.style.top = top + 'px'
              item.style.zIndex = 2
              top += item.offsetHeight
            }
            
            //第一列固定
            item.getElementsByTagName('td')[0].style.position = 'sticky'
            item.getElementsByTagName('td')[0].style.left = 0
            item.getElementsByTagName('td')[0].style.zIndex = 1
            item.getElementsByTagName('td')[0].style.backgroundColor = '#fff'
          }
        })
      })
    },