vue3 中 eltable 的部分操作实现

1.自动滚动

必要设置：设置 ref，获取元素，设置高度，可以滚动

实现效果：鼠标放上停止自动滚动，可手动滚动，鼠标离开自动滚动

import { ref, onMounted, onUnmounted } from 'vue'
const scrollTable: any = ref();
const scrollTimer: any = ref();
const tableData: any = ref();

const clearScroll = () => {
	clearInterval(scrollTimer.value)
	scrollTimer.value = null
}
const createScroll = () => {
	clearScroll()

	const table = scrollTable.value.layout.table.refs
	const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild

	scrollTimer.value= setInterval(() => {
		tableWrapper.scrollTop += 1;
		// 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
		if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
			tableWrapper.scrollTop = 0
		}
	}, 100)
}

onMounted(() => {
	createScroll()
})
onUnmounted(() => {
	clearScroll()
})


<el-table 
    :data="tableData"
	ref="scrollTable" 
	height="500" 
	@mouseover="clearScroll" 
	@mouseleave="createScroll"
></el-table>

---

2.合并行

设置属性：:span-method

<el-table 
    :data="tableData"
	height="500" 
    :span-method="spanMethod"
></el-table>


const tableData: any = ref();
function spanMethod({row, column, rowIndex, columnIndex,}: any){
    if(columnIndex === 0 || columnIndex === 1){
        if(row.spanCount){
            return [row.spanCount, 1];   //row.spanCount为需要合并的行数，只有第一行数据有这个值
        }else{
            return [0, 0];            
        }
    }else{
        return [1, 1];           
    }
}