主干同步到分支

tag/v2.6.1

Author: huangshuwei

packages/ve-table/src/index.jsx

@@ -410,11 +410,15 @@ export default {
         },
         columns: {
             handler(newVal, oldVal) {
-                if (newVal != oldVal) {
-                    this.columnsOptionResetTime++;
-                }
                 this.initColumns();
                 this.initGroupColumns();
+
+                // 排除首次
+                if (newVal != oldVal && oldVal) {
+                    this.columnsOptionResetTime++;
+                    // 需要等待 initColumns 和 initGroupColumns 先执行
+                    this.initScrolling();
+                }
             },
             immediate: true,
         },

tests/unit/specs/ve-table-common.spec.js

@@ -0,0 +1,105 @@
+/* 
+表格通用单元测试
+*/
+
+import { mount } from "@vue/test-utils";
+import veTable from "@/ve-table";
+import {
+    later,
+    mockElementMeasurement,
+    clearMockElementMeasurement,
+} from "../util";
+
+describe("veTable common", () => {
+    afterEach(() => {
+        clearMockElementMeasurement("scrollWidth");
+        clearMockElementMeasurement("clientWidth");
+    });
+
+    it("horizontal scroll effect", async () => {
+        mockElementMeasurement("scrollWidth", 1200);
+        mockElementMeasurement("clientWidth", 900);
+
+        const COLUMNS = [
+            { field: "col1", key: "a", title: "Title1" },
+            { field: "col2", key: "b", title: "Title2" },
+            { field: "col3", key: "c", title: "Title3" },
+            { field: "col4", key: "d", title: "Title4" },
+            { field: "col5", key: "e", title: "Title5" },
+            { field: "col6", key: "f", title: "Title6" },
+            { field: "col7", key: "g", title: "Title7" },
+            { field: "col8", key: "h", title: "Title8" },
+            { field: "col9", key: "i", title: "Title9" },
+            { field: "col10", key: "j", title: "Title10" },
+        ];
+
+        const COLUMNS2 = [
+            { field: "col1", key: "a", title: "Title1", fixed: "left" },
+            { field: "col2", key: "b", title: "Title2", fixed: "left" },
+            { field: "col3", key: "c", title: "Title3" },
+            { field: "col4", key: "d", title: "Title4" },
+            { field: "col5", key: "e", title: "Title5" },
+            { field: "col6", key: "f", title: "Title6" },
+            { field: "col7", key: "g", title: "Title7" },
+            { field: "col8", key: "h", title: "Title8" },
+            { field: "col9", key: "i", title: "Title9" },
+            { field: "col10", key: "j", title: "Title10", fixed: "right" },
+        ];
+
+        const TABLE_DATA = [
+            {
+                col1: "1",
+                col2: "2",
+                col3: "3",
+                col4: "4",
+                col5: "5",
+                col6: "6",
+                col7: "7",
+                col8: "8",
+                col9: "9",
+                col10: "10",
+            },
+        ];
+
+        const ParentComp = {
+            template: `
+                <veTable
+                    style="width:900px"
+                    :scrollWidth="1200"
+                    :columns="columns"
+                    :tableData="tableData"
+                />
+            `,
+            props: {
+                columns: {
+                    type: Array,
+                    required: true,
+                },
+            },
+            data() {
+                return {
+                    tableData: TABLE_DATA,
+                };
+            },
+            components: {
+                veTable,
+            },
+        };
+
+        await later();
+
+        const parentWrapper = mount(ParentComp, {
+            propsData: {
+                columns: COLUMNS,
+            },
+        });
+
+        const wrapper = parentWrapper.findComponent(veTable);
+
+        expect(wrapper.vm.isRightScrolling).toBe(false);
+
+        // 只能通过父组件设置
+        await parentWrapper.setProps({ columns: COLUMNS2 });
+        expect(wrapper.vm.isRightScrolling).toBe(true);
+    });
+});

tests/unit/util.js

@@ -23,3 +23,34 @@ export function mockScrollTo() {
     Element.prototype.scrollTo = fn;
     return fn;
 }
+
+/*
+ * @mockElementMeasurement
+ * @desc mock element measurement
+ */
+export function mockElementMeasurement(key, value) {
+    Object.defineProperty(HTMLElement.prototype, key, {
+        configurable: true,
+        value: value,
+    });
+}
+
+/*
+ * @clearMockElementMeasurement
+ * @desc clear mock element measurement
+ */
+export function clearMockElementMeasurement(key) {
+    // const originalValue = Object.getOwnPropertyDescriptor(
+    //     HTMLElement.prototype,
+    //     key,
+    // );
+
+    const originalValue = {
+        value: 1200,
+        writable: false,
+        enumerable: false,
+        configurable: true,
+    };
+
+    Object.defineProperty(HTMLElement.prototype, key, originalValue);
+}