<div style="height:100vh;overflow-y:auto">
<more-tree-table :col-data="colHead" :table-value="tableValue2" />
export default {
name:'Aaa',
data() {
return {
colHead: [
{
id:'1111',
name:'测试1',
children: [
{
id:'1111-1',
name:'测试1-1',
children: [
{
id:'1111-1-2',
name:'测试1-1-2'
},
{
id:'1111-1-3',
name:'测试1-1-4'
}
]
},
{
id:'1111-2',
name:'测试1-2',
children: [
{
id:'1111-2-2',
name:'测试1-2-2'
},
{
id:'1111-2-3',
name:'测试1-2-4'
}
]
},
{
id:'1111-3',
name:'测试1-3',
children: [
{
id:'1111-3-2',
name:'测试1-3-2'
},
{
id:'1111-3-3',
name:'测试1-3-4'
}
]
},
{
id:'1111-4',
name:'测试1-4'
}
]
},
{
id:'2222',
name:'测试1',
children: [
{
id:'2222-1',
name:'测试1-1',
children: [
{
id:'2222-1-2',
name:'测试1-1-2'
},
{
id:'2222-1-3',
name:'测试1-1-4'
}
]
},
{
id:'2222-2',
name:'测试1-2',
children: [
{
id:'2222-2-2',
name:'测试1-2-2'
},
{
id:'2222-2-3',
name:'测试1-2-4',
children: [
{
id:'2222-2-3-1',
name:'测试1-2-2'
},
{
id:'2222-2-3-2',
name:'测试1-2-2'
}
]
}
]
},
{
id:'2222-3',
name:'测试1-3',
children: [
{
id:'2222-3-2',
name:'测试1-3-2'
},
{
id:'2222-3-3',
name:'测试1-3-4'
}
]
},
{
id:'2222-4',
name:'测试1-4'
}
]
}
],
tableValue2: [
{
'1111-1-2':'VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格',
'1111-1-3':'VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填',
'1111-2-2':'VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填',
'1111-2-3':'VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 表头表格 根据ID填',
'1111-3-2':'VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据IDVUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 填',
'2222-3-3':'VUE 竖向纵向仿表格VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态VUE 竖向纵向仿表格 动态 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填',
'1111-4':'a:\nb b:\nc',
'2222-4':'根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填充单元格VUE 竖向纵向仿表格 动态渲染表头表格 根据ID填'
}
]
}
},
mounted() {
window.onresize = () => {
this.$nextTick(() => {
const tr =document.querySelectorAll('.value-table .editTable__block tr')
console.log(tr, 'tr')
const tr2 =document.querySelectorAll('#tb tr')
for (let i =0; i < tr.length; i++) {
tr2[i].style.height = tr[i].offsetHeight +'px'
}
window.addEventListener('wheel', this.handleMouseWheel, {
passive:false
})
})
}
this.$nextTick(() => {
const tr =document.querySelectorAll('.value-table .editTable__block tr')
console.log(tr, 'tr')
const tr2 =document.querySelectorAll('#tb tr')
for (let i =0; i < tr.length; i++) {
tr2[i].style.height = tr[i].offsetHeight +'px'
}
window.addEventListener('wheel', this.handleMouseWheel, {
passive:false
})
})
},
methods: {
handleMouseWheel() {
document.querySelector('#tb').style.top =0 +'px'
document.querySelector('.rr-scrollbar.vertical').style.top =0 +'px'
document.querySelector('.value-data-div').style.top =0 +'px'
}
}
}
<style scoped>
.editTableWrapper{
overflow:visible!important;
}
/deep/.rr-scrollbar__thumb{
visibility:hidden!important;
}
/deep/.value-table .editTable__block tr{
white-space:pre-line!important;
}
