为web表格提供一种类似excel拖动多选以及window系

为web表格提供一种类似excel拖动多选以及window系统文件选择的拖拉多选的功能

只需要为你的表格添加一行代码（v-table-frag）

目前只针对技术栈为（element ui + Vue）的项目

多选：

拖拉多选

分段多选：

按住shift拖拉可分段多选

身为开发者你需要了解：

点击这里

npm i table-select-drag 使用

1、插件引用

全局引用(main.js中)

import 'table-select-drag'

2、绑定指令

在el-table标签中添加v-table-frag指令

<el-table v-table-frag ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }} </template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> 选项

由于开发者表格数据源、多选数据源命名不统一，支持开发者传入自定义的属性名称.

自定义指令入参

v-table-drag ="{tableDataName: 'tableData2',changesListName: 'multipleSelection2'}" tableDataName(可选) 类型：String? 默认值：tableData 描述：表格所渲染数据源数组的属性名 changesListName(可选) 类型：String? 默认值：multipleSelection 描述：@selection-change多选事件中用于存储多选数据的数组属性名 实现思路

Vue全局自定义指令 + DOM操作 + 虚拟DOM操作 + ES6 + el-table的@selection-change事件

QQ：1415580200