【原生事件】Table列表中，鼠标滑动自动复制填充功能

问题描述： table表中有一列为input编辑框，要求编辑一行后，鼠标滑动可以自动填充若干行。

解决思路： 1，优先想到是否有类似功能的表格插件 如：# 原生js实现框选表格内容并批量更改（vue）

2，再想到在线excel功能，如：Spreadjs

3，在查看以上两种思路的资料时发现，其实我的需求体量不大，不需要插件，总结来说，只是鼠标点击，按住滑动，放开等事件的过程中，对数据进行复制自动填充等即可。

思路： 利用mousedown，mouseup，mouseover等事件，进行逻辑判断和数据处理即可

1，在用户鼠标按下时，获取当前input框中数值，并设置标识符，开始事件监听

2，将鼠标划过的input框中值替换为1步中保存的数值

3，鼠标放开时，设置标识符，停止事件监听

上代码

一，在template中绑定事件

//在整个table上绑定mouseup事件
<el-table :data="editParm.daStrategyList"  @mouseup="handleMouseUp()" height="450px">
                <el-table-column label="时段" prop="point" />
                <el-table-column label="原始值">
                    <template #default="scope">
                        <span>{{ scope.row.original }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="调整系数">
                    <template #default="scope">
                        <div 
                            @mousedown.native="handleMouseDown(scope.row)"//绑定mousedown事件
                            @mouseover="handleMouseOver(scope.row)"//绑定mouseover事件
                        >
                            <span v-if="isCheckFlag">{{ scope.row.ratio }}</span>
                            <el-input
                                v-else
                                v-model="scope.row.ratio"
                                placeholder="请输入调整系数"
                                type="number"
                                step="0.1"
                                min="0"
                                @change="ratioChange(scope.row)"
                            />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="日前申报值">
                    <template #default="scope">
                        <span>{{ scope.row.daValue }}</span>
                    </template>
                </el-table-column>
</el-table>

二，对应方法

// 批量修改
//鼠标向下点击
function handleMouseDown(row) {
    editTag.value=true;
    editRatio.value =row.ratio;
}
//鼠标向下点击后划过
function handleMouseOver(row) {
    if(editTag.value===false){
        return
    }
    row.ratio=editRatio.value;
}
//鼠标放开
function handleMouseUp() {
    editTag.value=false;
}

总结： 从理解需求到明确技术方法之间，需要一定的沟通和梳理

这个需求乍一听，感觉有些复杂，所以我第一反应找插件，但认真理解后发现，其实需求本身并不复杂。通过原生事件也能处理。

以上为解决问题的过程和最终代码的记录，定有许多不足，感谢大佬们的阅读，如果不当，欢迎指正！！