From b9b9bb9ccee7b97e11100d62bd51f403ad753c92 Mon Sep 17 00:00:00 2001
From: Ysir <290359915@qq.com>
Date: Tue, 25 Jun 2024 19:39:39 +0800
Subject: [PATCH] j

---
 src/BaseComponent/BaseTable/src/Table.vue | 102 +++++++++++++++++++++-
 1 file changed, 100 insertions(+), 2 deletions(-)

diff --git a/src/BaseComponent/BaseTable/src/Table.vue b/src/BaseComponent/BaseTable/src/Table.vue
index 1850b06..94686ae 100644
--- a/src/BaseComponent/BaseTable/src/Table.vue
+++ b/src/BaseComponent/BaseTable/src/Table.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { computed,ref,watch,nextTick } from 'vue'
 
 const props = defineProps({
   border: {
@@ -77,7 +77,11 @@ const props = defineProps({
     default: () => ({}),
   },
 })
-const emit = defineEmits(['update:paginationInfo', 'sortChange'])
+const emit = defineEmits(['update:paginationInfo', 'sortChange',
+  "row-click",
+  "selection-change",
+  "current-change",
+  "update:multipleSelection"])
 const headerRef = ref(null)
 const elTableRef = ref(null)
 const handleCurrentChange = (pageNum) => {
@@ -149,6 +153,94 @@ defineExpose({
   elTableRef,
   unFoldAll,
 })
+
+// ***************** shift多选主要功能代码***************
+// 上一次点击的索引
+const lastClickIndex = ref(undefined);
+// 上一次选择的方式 1：单选，2：多选，3：连选
+let lastSelectStatus = 1;
+// 表格行点击事件
+const handleRowClick = (row, column, e) => {
+  // 测试自定义禁用规则，如果这一行通过规则校验为false，说明这一行是禁止选择的，不进行勾选
+  // if (!props.selectableFn(row)) {
+  //   return;
+  // }
+  const { ctrlKey, shiftKey } = e;
+  const rowIndex = props.dataList.findIndex((item) => item.id === row.id);
+  if (!ctrlKey && !shiftKey) {
+    // ctrl和shift都没有按下时单选
+    // 如果上次的索引和这次的索引不同 或 上一次不是单选 则清空选择
+    if (lastClickIndex.value !== rowIndex || lastSelectStatus !== 1) {
+      elTableRef.value.clearSelection();
+    }
+    elTableRef.value.toggleRowSelection(row, undefined);
+    lastSelectStatus = 1;
+  } else if (ctrlKey) {
+    // 按下ctrl多选
+    elTableRef.value.toggleRowSelection(row, undefined);
+    lastSelectStatus = 2;
+  } else if (shiftKey) {
+    // 按下shift连选
+    if (lastClickIndex.value === undefined) {
+      return;
+    }
+    let minIndex = 0;
+    let maxIndex = 0;
+    if (rowIndex < lastClickIndex.value) {
+      minIndex = rowIndex;
+      maxIndex = lastClickIndex.value + 1;
+    } else {
+      minIndex = lastClickIndex.value;
+      maxIndex = rowIndex + 1;
+    }
+    props.dataList
+      .slice(minIndex, maxIndex)
+      .forEach((item) => elTableRef.value.toggleRowSelection(item, true));
+    lastSelectStatus = 3;
+  }
+  lastClickIndex.value = rowIndex;
+};
+// 处理表格复选框改变事件
+const handleSelectionChange = (val) => {
+  emit("update:multipleSelection", val);
+};
+
+// 当前行变化触发（单选）
+const handleCurrentChange2 = (val) => {
+  emit("current-change", val);
+};
+
+// 默认勾选
+watch(
+  () => props.selected,
+  async (selectedRow) => {
+    if (selectedRow.length > 0) {
+      await nextTick();
+      elTableRef.value.clearSelection();
+      selectedRow.forEach((row) => {
+        // 注意:这里的row的引用必须和表格行的引用相同才能生效
+        // 否则无法实现选中效果
+        // 也就是说这里初始选择行的数据必须从渲染表格的数据那里取
+        elTableRef.value.toggleRowSelection(row, undefined);
+      });
+    } else {
+      elTableRef.value.clearSelection();
+    }
+  }
+);
+
+// 表格出现时清空选择
+watch(
+  () => props.show,
+  async (show) => {
+    if (show) {
+      await nextTick();
+      tableRef.value.clearSelection();
+    }
+  }
+);
+
+
 </script>
 
 <template>
@@ -167,6 +259,8 @@ defineExpose({
         </div>
       </slot>
     </div>
+<!-- 参考 https://blog.csdn.net/weixin_47365243/article/details/135967370
+           -->
     <el-table
       class="elTable"
       ref="elTableRef"
@@ -179,6 +273,10 @@ defineExpose({
       @sort-change="sortChange"
       v-on="tableListener"
       v-bind="elTableConfig"
+
+      @row-click="handleRowClick"
+      @selection-change="handleSelectionChange"
+      @current-change="handleCurrentChange2"
     >
       <el-table-column type="expand" v-if="showExpand">
         <template #default="{ row }">
-- 
Gitee