js(vue)实现table(element table)固定上四行和左一列/table组件固定列和行

  • Post author:
  • Post category:vue


需求

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

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

, 用过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'
          }
        })
      })
    },



版权声明:本文为baidu_41632421原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。