Vue 表格单击双击事件互相影响

<template>
    <el-container>
        <el-header style="padding: 10px;" class="header-section">
            <div>
                <el-input v-model="state.search" placeholder="请输入"></el-input>
                <el-button @click="getData" type="primary" icon="el-icon-search">查询</el-button>
            <div>
                <el-button @click="Refresh" type="primary" icon="el-icon-refresh">刷新</el-button>
            </div>
        </el-header>

        <el-main class="nopadding" style="height: 100%;">
            <scTable @row-click="handleRowClick" @row-dblclick="DBChangeRow" :column="state.column" :data="state.tableData" stripe>
            </scTable>
        </el-main>
    </el-container>
</template>

事件处理：

<script setup>
    import { reactive } from "vue";

    const state = reactive({
        clickTimeout:null,
    })

    // 表格单击
    const handleRowClick = async (val) => {
        clearTimeout(state.clickTimeout)
        state.clickTimeout = setTimeout(()=>{
            //单击后要做的事
        },200)
    }

    // 表格双击
    const DBChangeRow = (val) =>{
        clearTimeout(state.clickTimeout)
        //双击后要做的事
    }
</script>