!499 fix(table): 清空dataSource与selectedKeys同时进行，selectedKeys清空异常

jevin98 · sleeprite · commit 698f06716ce3 · 2025-07-08T09:50:18.000Z
* chore: updat test
* fix(table): 清空dataSource与selectedKeys同时进行，selectedKeys清空异常
diff --git a/packages/component/component/table/__tests__/table.test.tsx b/packages/component/component/table/__tests__/table.test.tsx
@@ -1,10 +1,10 @@
 import { DOMWrapper, type VueWrapper, mount } from "@vue/test-utils";
 import LayTable from "../index.vue";
 import LayCheckboxV2 from "@layui/component/component/checkboxV2/index.vue";
-import Button from '@layui/component/component/button/index.vue'
+import LayButton from '@layui/component/component/button/index.vue'
 
 import { describe, expect, test, vi } from "vitest";
-import {h, nextTick, reactive, ref} from "vue";
+import {h, nextTick, reactive, ref, watch} from "vue";
 import { sleep } from "../../../test-utils";
 
 describe("LayTable", () => {
@@ -533,7 +533,7 @@ describe("LayTable", () => {
     const defaultToolbars = [
       "filter",
       {
-        render: () => h(Button, {
+        render: () => h(LayButton, {
           onClick: () => {
             value++;
           },
@@ -942,4 +942,79 @@ describe("LayTable", () => {
 
     expect(_class).toMatch(/layui-table-fixed-left-last/)
   });
+
+  // https://gitee.com/layui-vue/layui-vue/issues/ICKILA
+  test("selectedKeys制空未生效", async () => {
+
+    const selectedKeys = ref([]);
+
+    const wrapper = mount({
+      setup() {
+         const columns = reactive([
+          { type: "checkbox", title: "复选" },
+          { title: "用户", width: "80px", key: "name" },
+        ]);
+        const dataSource = ref<any>([]);
+
+        function generateData1() {
+          dataSource.value = [
+            { id: "3", name: "张三3", city: "城市-3", sex: "男", age: "20", remark: "屈指古今多少事，都只是、镜中春", score: 100, sign: "已签到", joinTime: "2022-02-09" },
+            { id: "4", name: "张三4", city: "城市-4", sex: "男", age: "20", remark: "屈指古今多少事，都只是、镜中春", score: 100, sign: "已签到", joinTime: "2022-02-09" }, 
+            { id: "5", name: "张三5", city: "城市-5", sex: "男", age: "20", remark: "屈指古今多少事，都只是、镜中春", score: 100, sign: "已签到", joinTime: "2022-02-09" }
+          ];
+        }
+
+        function generateData2() {
+          dataSource.value = [
+            { id: "9", name: "张三9", city: "城市-9", sex: "男", age: "20", remark: "屈指古今多少事，都只是、镜中春", score: 100, sign: "已签到", joinTime: "2022-02-09" },
+            { id: "10", name: "张三10", city: "城市-10", sex: "男", age: "18", remark: "屈指古今多少事，都只是、镜中春", score: 100, sign: "已签到", joinTime: "2022-02-09" },
+            { id: "11", name: "张三11", city: "城市-11", sex: "男", age: "18", remark: "屈指古今多少事，都只是、镜中春", score: 100, sign: "已签到", joinTime: "2022-02-09" },
+            { id: "12", name: "张三12", city: "城市-12", sex: "男", age: "20", remark: "屈指古今多少事，都只是、镜中春", score: 100, sign: "已签到", joinTime: "2022-02-09" },
+          ];
+        }
+
+        watch([dataSource], () => {
+          selectedKeys.value = []
+        });
+
+        return () => (
+          <div>
+            <LayButton class='custom-btn1' size="sm" onClick={generateData1}>
+              数据1
+            </LayButton>
+            <LayButton class='custom-btn2' size="sm" onClick={generateData2}>
+              数据2
+            </LayButton>
+            <LayTable
+              columns={columns}
+              dataSource={dataSource.value}
+              v-model:selectedKeys={selectedKeys.value}
+            ></LayTable>
+          </div>
+        );
+      },
+    });
+
+    await nextTick()
+
+    const btn1 = wrapper.find('.custom-btn1')
+    const btn2 = wrapper.find('.custom-btn2')
+
+    await btn1.trigger('click')
+
+    const trs1 = wrapper.findAll('.layui-table-body .layui-table tbody tr')
+    expect(trs1.length).toBe(3)
+
+    await trs1[0].findComponent('.layui-checkbox').trigger('click')
+    expect(selectedKeys.value.length).toBe(1)
+
+    await trs1[1].findComponent('.layui-checkbox').trigger('click')
+    expect(selectedKeys.value.length).toBe(2)
+
+    await btn2.trigger('click')
+    const trs2 = wrapper.findAll('.layui-table-body .layui-table tbody tr')
+    expect(trs2.length).toBe(4)
+
+    expect(selectedKeys.value.length).toBe(0)
+  });
 });
diff --git a/packages/component/component/table/hooks/useTableSelected.ts b/packages/component/component/table/hooks/useTableSelected.ts
@@ -1,5 +1,5 @@
 import type { RequiredTableProps, TableEmit } from "../typing";
-import { isValueArray, loopForEach } from "@layui/component/utils";
+import { arrayEverySame, isValueArray, loopForEach } from "@layui/component/utils";
 
 import { computed, reactive, ref, toRaw, watch } from "vue";
 
@@ -24,14 +24,9 @@ export function useTableSelected(props: RequiredTableProps, emit: TableEmit) {
     emit("update:selectedKey", key);
   }
 
-  /**
-   * Multiple checkbox
-   */
-  const allMSelected = ref(false);
-  const someMSelected = ref(false);
   const tableMSelectedKeys = reactive<
     NonNullable<RequiredTableProps["selectedKeys"]>
-  >([]);
+  >(props.selectedKeys);
 
   const allKeys = computed(() => {
     const keys: RequiredTableProps["selectedKeys"] = [];
@@ -59,29 +54,33 @@ export function useTableSelected(props: RequiredTableProps, emit: TableEmit) {
       );
     },
     {
-      immediate: true,
       deep: true,
     },
   );
 
-  watch(
-    () => [tableMSelectedKeys, allKeys.value],
-    ([tableMultipleSelectedKeysValue, allKeysValue]) => {
-      allMSelected.value = allKeysValue.length > 0 && allKeysValue.every(key =>
-        tableMultipleSelectedKeysValue.includes(key),
-      );
-      someMSelected.value = allKeysValue.length > 0 && allKeysValue.some(key =>
-        tableMultipleSelectedKeysValue.includes(key),
-      );
+  /**
+   * Multiple checkbox
+   */
+  const allMSelected = computed(() => {
+    return allKeys.value.length > 0 && allKeys.value.every(key =>
+      tableMSelectedKeys.includes(key),
+    );
+  });
 
-      if (
-        tableMultipleSelectedKeysValue.length !== props.selectedKeys?.length
-      ) {
+  const someMSelected = computed(() => {
+    return allKeys.value.length > 0 && allKeys.value.some(key =>
+      tableMSelectedKeys.includes(key),
+    );
+  });
+
+  watch(
+    tableMSelectedKeys,
+    (tableMultipleSelectedKeysValue) => {
+      if (!arrayEverySame(tableMultipleSelectedKeysValue, props.selectedKeys)) {
         emit("update:selectedKeys", [...tableMultipleSelectedKeysValue]);
       }
     },
     {
-      immediate: true,
       deep: true,
     },
   );
diff --git a/packages/component/utils/arrayUtil.ts b/packages/component/utils/arrayUtil.ts
@@ -1,26 +1,12 @@
 import { isFunction, isNumber } from "./type";
 
-export const check = (arr: any[], value: any) => {
-  return arr.indexOf(value) > -1;
-};
-
-/**
- * 计算数组差异
- *
- * @param arr1 数组
- * @param arr2 数组
- */
-function diff(arr1: any[], arr2: any[]) {
-  let newArr = [];
-  arr1 = Array.from(new Set(arr1)); // 去重
-  arr2 = Array.from(new Set(arr2)); // 去重
-  newArr = arr1.concat(arr2);
-  return newArr.filter((x) => !(arr1.includes(x) && arr2.includes(x)));
+export function check(arr: any[], value: any) {
+  return arr.includes(value);
 }
 
-export const isValueNull = (v: any) => {
+export function isValueNull(v: any) {
   return Array.isArray(v) ? !v.length : !v;
-};
+}
 
 export function isArray(val: any): val is Array<any> {
   return val && Array.isArray(val);
@@ -58,9 +44,10 @@ export function loopForEach(
   array: any[] | undefined,
   children: string | loopForEachCallback,
   callback: loopForEachCallback,
-  parent?: any
+  parent?: any,
 ) {
-  if (!isValueArray(array)) return;
+  if (!isValueArray(array))
+    return;
 
   let _children: string;
   let _callback: callback[];
@@ -70,12 +57,13 @@ export function loopForEach(
     _children = "children";
     _callback = isFunction(children) ? [children] : children;
     _parent = callback;
-  } else {
+  }
+  else {
     _children = children;
     _callback = isFunction(callback) ? [callback] : callback;
   }
 
-  if (!isValueArray(_callback) || _callback.some((cb) => !isFunction(cb)))
+  if (!isValueArray(_callback) || _callback.some(cb => !isFunction(cb)))
     return;
 
   for (let index = 0; index < array.length; index++) {
@@ -106,7 +94,7 @@ export function loopSomeLevelALLChildren(
 export function loopSomeLevelALLChildren(
   lists: any[],
   childrenKey: string | number,
-  level = 1
+  level = 1,
 ): any[] {
   let _childrenKey: string;
   let _level: number = level;
@@ -134,3 +122,7 @@ export function loopSomeLevelALLChildren(
 
   return result;
 }
+
+export function arrayEverySame<T extends any[]>(arr1: T, arr2: T): boolean {
+  return arr1.every(i => arr2.includes(i)) && arr2.every(i => arr1.includes(i));
+}
