useTableRowMousemove

监听鼠标在 el-table 表格行中的移动事件

关联组件

• ElTable

基础用法

类型

/**
 * 鼠标在el-table的表格行中移动时的回调函数类型
 * @param event 鼠标对象
 * @param index 鼠标所在行的下标，从0开始，如果不在表格行中则为null
 */
type CallbackFn = (event: MouseEvent, index: number | null) => void

/**
 * 监听鼠标在el-table的表格行中移动的hook
 * @param callback 当数据在表格行中移动时的回调函数
 */
function useTableRowMousemove(callback: CallbackFn): {
  tableRef: Ref<InstanceType<typeof ElTable>>,
  stopListener: () => void
}

使用示例

<script setup lang="ts">
import { ElTable, ElButton } from 'element-plus'
import { useTableRowMousemove } from 'element-plus-ext'

const { tableRef, stopListener } = useTableRowMousemove(({ clientX, clientY }, rowIndex) => {
  console.log({ clientX, clientY, rowIndex })
})
</script>

<template>
  <el-table ref="tableRef">
    <!-- 列的代码省略了 -->
  </el-table>

  <el-button @click="stopListener">停止监听</el-button>
</template>