< el-table:data = " tableData" ref = " tableRef" border style = " width : 100%" height = " 150" > < el-table-column prop = " date" label = " 名称" width = " 250" /> < el-table-column prop = " name" label = " 订单数" width = " 180" /> < el-table-columnprop = " address" label = " 平均评分" width = " 180" /> </ el-table>
< script lang= "ts" setup>
import { ref, onMounted } from "vue"
const tableRef = ref ( null )
onMounted ( ( ) => { const tableBody = ( tableRef as TypeAny) . value. $refs. bodyWrapperconst tableDom = tableBody. getElementsByClassName ( "el-scrollbar__wrap" ) [ 0 ] let isScroll = true tableDom. addEventListener ( "mouseover" , ( ) => { isScroll = false } ) tableDom. addEventListener ( "mouseout" , ( ) => { isScroll = true } ) setInterval ( ( ) => { if ( isScroll) { tableDom. scrollTop += 1 if ( tableDom. clientHeight + tableDom. scrollTop == tableDom. scrollHeight) { tableDom. scrollTop = 0 } } } , 150 )
} )
< / script>