elementUI table多层嵌套展开后fixed固定栏对齐

2024-07-11 01:20| 来源: 网络整理| 查看: 265

问题：表格三层嵌套并且存在fixed属性的列，当展开第三层时会产生fixed所在的列对不齐的情况在这里插入图片描述

解决如下： 1.给第二层的table设置class，注意第一二层的mainId属性必须一致才可以 2.每次点击第二层table的展开事件时，等待dom渲染完毕，再根据相同的mainId给展开的内容的高度重新赋值

//给第二层的table设置class，注意第一二层的mainId属性必须一致才可以我是第三层展开编辑1 编辑 export default { data() { return { tableData: [ { mainId: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄', child: [ { mainId: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄', }, { mainId: 1, date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄', }, ], }, { mainId: 2, date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄', }, { mainId: 3, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄', }, { mainId: 4, date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄', }, { mainId: 5, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄', }, ], } }, methods: { //每次点击第二层的展开等待渲染完毕，就会根据相同的mainId给展开的内容的高度重新赋值 async expand1(row) { await this.$nextTick() const a = document.getElementsByClassName(`td_${row.mainId}`)[0] const b = document.getElementsByClassName(`td_${row.mainId}`)[1] let h = a.clientHeight + 'px! important' b.setAttribute('style', `height: ${h}; margin-left: -50px`) this.$refs['mainTable'].doLayout() }, }, }

效果如下：在这里插入图片描述

【本文地址】

公司简介

联系我们