feat: 表格增加鼠标按住移动选择功能

src/components/CustomTable/index.vue

@@ -2,6 +2,7 @@
   <a-table
     ref="tableRef"
     class="custom-table"
+    :class="['custom-table', canSelect && multiple && mouseMoveSelect ? 'mouse-move-select' : '']"
     v-bind="$attrs"
     :data-source="list"
     :columns="columns"
@@ -9,7 +10,7 @@
     :row-key="rowKey"
     :loading="loading"
     :pagination="pagination"
-    :customRow="customRow"
+    :customRow="multiple && mouseMoveSelect ? customMouseMoveSelectRow : customRow"
     :rowClassName="() => (canSelect ? 'custom-table-row' : '')"
     @change="handleTableChange"
   >
@@ -58,10 +59,16 @@ export default {
       type: Boolean,
       default: true,
     },
+    // 多选
     multiple: {
       type: Boolean,
       default: false,
     },
+    // 鼠标移动选择
+    mouseMoveSelect: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -69,6 +76,14 @@ export default {
       innerSelectedRows: [],
     }
   },
+  mounted() {
+    if (this.canSelect && this.multiple && this.mouseMoveSelect) {
+      const tbody = this.$el.querySelector('.ant-table-tbody')
+      tbody.addEventListener('mouseleave', () => {
+        this.mouseMoveStartIndex = undefined
+      })
+    }
+  },
   methods: {
     // 实现单击选中/反选功能
     customRow(record, index) {
@@ -105,6 +120,34 @@ export default {
         },
       }
     },
+
+    // 实现鼠标拖移动多选功能
+    customMouseMoveSelectRow(record, index) {
+      const key = record[this.rowKey]
+      return {
+        class: this.innerSelectedRowKeys.includes(key) ? 'ant-table-row-selected' : '',
+        on: {
+          mousedown: () => {
+            this.innerSelectedRowKeys = []
+            this.mouseMoveStartIndex = index
+          },
+          mouseenter: () => {
+            if (this.mouseMoveStartIndex !== undefined) {
+              const indexes = [this.mouseMoveStartIndex, index].sort((a, b) => a - b)
+              this.innerSelectedRowKeys = this.list.slice(indexes[0], indexes[1] + 1).map((item) => item[this.rowKey])
+            }
+          },
+          mouseup: () => {
+            // 开始和结束在同一个，相当于click
+            if (this.mouseMoveStartIndex == index) {
+              this.innerSelectedRowKeys = [key]
+            }
+            this.mouseMoveStartIndex = undefined
+          },
+        },
+      }
+    },
+
     handleTableChange(pagination, filters, sorter) {
       this.$emit('change', pagination, filters, sorter)
     },
@@ -136,8 +179,20 @@ export default {
   },
 }
 </script>
-<style lang="less">
+<style lang="less" scoped>
-.custom-table-row {
+::v-deep {
+  .custom-table-row {
     cursor: pointer;
+  }
+}
+
+.mouse-move-select {
+  user-select: none;
+
+  ::v-deep {
+    td {
+      transition: none !important;
+    }
+  }
 }
 </style>