el-table 合计放入首行和固定列以及表格拖动 都会产生错行的问题

博客主要围绕前端表格操作展开,不提及合计方式,先将合计列放入首行,解决覆盖问题时加入样式,之后添加表格列宽拖动事件,涉及Vue.js和JavaScript相关操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里就不写合计的方式了

首先将合计列放入首行

 mounted () {
    this.showSummariesPosition()
  },  
 destroyed () {
    //进行销毁
    this.showSummariesPosition()
  },
  methods: {
    showSummariesPosition () {
      const table = document.querySelector('.table-self') // customTable这个是在el-    table定义的类名
      const footer = document.querySelector('.table-self .el-table__footer-wrapper')
      const body = document.querySelector('.table-self .el-table__body-wrapper')
      table.removeChild(footer) // 移除表格最下方的合计行
      table.insertBefore(footer, body) // 把合计行插入到表格body的上面
      this.$nextTick(() => {
        //固定列的也进行一下位置调换
        const left = document.querySelector('.el-table__fixed')
        const leftfooter = document.querySelector('.el-table__fixed .el-table__fixed-footer-wrapper')
        const leftbody = document.querySelector('.el-table__fixed .el-table__fixed-body-wrapper')
        leftbody.style.top = '0px'
        console.log(leftbody);
        left.removeChild(leftfooter) // 移除表格最下方的合计行
        left.insertBefore(leftfooter, leftbody) // 把合计行插入到表格body的上面
      })
}
}

此时看着还有点覆盖问题 加入样式

.el-table__footer-wrapper {
  position: sticky;
  bottom: 0;
  z-index: 1; /* 可选,确保合计行在表格中的最上层 */
}

那么此时就放入第一行了

那么此时添加表格列宽拖动事件

//table添加拖动事件
<el-talbe @header-dragend="handleDragend"> </el-table>  


handleDragend (newWidth, oldWidth, column, event) {
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })

    },

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值