极客观点
项目管理
HarmonyOS
使用el-table-v2组件时，在拖动滚动条时，合并渲染不正常显示，同时不能实现列宽调整，能否有解决方案？
<template>
<el-table-v2 fixed :columns="columns" :data="data" :width="300" :height="400" @scroll="disscr" >
<template #row="props">
<Row v-bind="props" />
</template>
</el-table-v2>
</template>
<script setup>
import { cloneVNode,onMounted,ref } from 'vue'
const columns =[
{key:'a1',dataKey:'a1',title:'a1',width:100},
{key:'a2',dataKey:'a2',title:'a2',width:100},
]
const data = [
{
"id": 0,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 1,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 2,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 3,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 4,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 5,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 6,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 7,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 8,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 9,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 10,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 11,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 12,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 13,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 14,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 15,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 16,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 17,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 18,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 19,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 20,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 21,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 22,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 23,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 24,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 25,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 26,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 27,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 28,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 29,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 30,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 31,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 32,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 33,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 34,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 35,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 36,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 37,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 38,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 39,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 40,
"a1": "20230703",
"a2": "20230703"
},
{
"id": 41,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 42,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 43,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 44,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 45,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 46,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 47,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 48,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 49,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 50,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 51,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 52,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 53,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 54,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 55,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 56,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 57,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 58,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 59,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 60,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 61,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 62,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 63,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 64,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 65,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 66,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 67,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 68,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 69,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 70,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 71,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 72,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 73,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 74,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 75,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 76,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 77,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 78,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 79,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 80,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 81,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 82,
"a1": "20230704",
"a2": "20230704"
},
{
"id": 83,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 84,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 85,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 86,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 87,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 88,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 89,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 90,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 91,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 92,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 93,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 94,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 95,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 96,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 97,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 98,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 99,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 100,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 101,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 102,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 103,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 104,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 105,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 106,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 107,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 108,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 109,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 110,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 111,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 112,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 113,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 114,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 115,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 116,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 117,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 118,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 119,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 120,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 121,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 122,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 123,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 124,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 125,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 126,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 127,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 128,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 129,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 130,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 131,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 132,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 133,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 134,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 135,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 136,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 137,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 138,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 139,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 140,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 141,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 142,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 143,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 144,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 145,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 146,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 147,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 148,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 149,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 150,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 151,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 152,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 153,
"a1": "20230705",
"a2": "20230705"
},
{
"id": 154,
"a1": "20230706",
"a2": "20230706"
},
{
"id": 155,
"a1": "20230706",
"a2": "20230706"
}
]
const disscr=(e)=>{
console.log("sr",e.scrollTop)
}
var ls=[]
const px = (da) => {
let a=new Array(da.length).fill(1)
da.reduceRight((ra, rb, i) => {
if(ra.a1 === rb.a1 ){
a[i]=a[i+1]+1
}
return rb
})
return a
}
ls=px(data)
var la=[]
const rowSpanIndex = 0
const Row = ({ rowData, rowIndex, cells, columns }) => {
la.push(rowIndex)
if(rowIndex===la[0] || la.length>11 ||la.length-9>rowIndex){
la=[]
la.push(rowIndex)
}
// console.log("la",la)
const rowSpan = ls[rowIndex]
// console.log('rowIndex: ', rowIndex);
const cell = cells[rowSpanIndex]
if (la[0]===rowIndex || ls[rowIndex] >ls[rowIndex-1]) {
const style = {
...cell.props.style,
backgroundColor: 'orange',
height: `${ls[rowIndex] * 50 - 1}px`,
alignSelf: 'flex-start',
zIndex: 1,
}
cells[rowSpanIndex] = cloneVNode(cell, { style })
}
return cells
}
</script>使用el-table-v2组件时，使用滚动轮符合预期，但在拖动滚动条时，合并渲染不正常显示。
同时el-table-v2组件能否实现列宽调整的解决方案？