yy-vue-easytable 2.27.2

package/packages/ve-table/src/header/header-tr.jsx

@@ -0,0 +1,255 @@
+import HeaderTh from "./header-th";
+import { clsName, getDomResizeObserverCompKey } from "../util";
+import { COMPS_NAME, EMIT_EVENTS } from "../util/constant";
+import VueDomResizeObserver from "../../../src/comps/resize-observer";
+import emitter from "../../../src/mixins/emitter";
+export default {
+    name: COMPS_NAME.VE_TABLE_THADER_TR,
+    mixins: [emitter],
+    props: {
+        columnsOptionResetTime: {
+            type: Number,
+            default: 0,
+        },
+        // group columns item
+        groupColumn: {
+            type: Array,
+            required: true,
+        },
+        headerRows: {
+            type: Array,
+            default: function () {
+                return [];
+            },
+        },
+        colgroups: {
+            type: Array,
+            required: true,
+        },
+        fixedHeader: {
+            type: Boolean,
+            required: true,
+        },
+        isGroupHeader: {
+            type: Boolean,
+            required: true,
+        },
+        rowIndex: {
+            type: Number,
+            required: true,
+        },
+        cellSelectionData: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // cell selection range data
+        cellSelectionRangeData: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        headerIndicatorColKeys: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // checkbox option
+        checkboxOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // sort option
+        sortOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // sort columns
+        sortColumns: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // cell style option
+        cellStyleOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // event custom option
+        eventCustomOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+    },
+    methods: {
+        // tr height change
+        trHeightChange({ height }) {
+            this.dispatch(
+                COMPS_NAME.VE_TABLE,
+                EMIT_EVENTS.HEADER_ROW_HEIGHT_CHANGE,
+                {
+                    rowIndex: this.rowIndex,
+                    height: height,
+                },
+            );
+        },
+        // click
+        rowClick(e, fn) {
+            fn && fn(e);
+        },
+        // dblclick
+        rowDblclick(e, fn) {
+            fn && fn(e);
+        },
+        // contextmenu
+        rowContextmenu(e, fn) {
+            fn && fn(e);
+        },
+        // mouseenter
+        rowMouseenter(e, fn) {
+            fn && fn(e);
+        },
+        // mouseleave
+        rowMouseleave(e, fn) {
+            fn && fn(e);
+        },
+        // mousemove
+        rowMousemove(e, fn) {
+            fn && fn(e);
+        },
+        // mouseover
+        rowMouseover(e, fn) {
+            fn && fn(e);
+        },
+        // mousedown
+        rowMousedown(e, fn) {
+            fn && fn(e);
+        },
+        // mouseup
+        rowMouseup(e, fn) {
+            fn && fn(e);
+        },
+    },
+    render() {
+        const {
+            groupColumn,
+            colgroups,
+            headerRows,
+            fixedHeader,
+            rowIndex,
+            trHeightChange,
+            checkboxOption,
+            sortOption,
+            sortColumns,
+            cellStyleOption,
+            eventCustomOption,
+            cellSelectionData,
+        } = this;
+
+        // custom on cell event
+        let customEvents = {};
+        if (eventCustomOption) {
+            const { headerRowEvents } = eventCustomOption;
+            customEvents = headerRowEvents ? headerRowEvents({ rowIndex }) : {};
+        }
+
+        const {
+            click,
+            dblclick,
+            contextmenu,
+            mouseenter,
+            mouseleave,
+            mousemove,
+            mouseover,
+            mousedown,
+            mouseup,
+        } = customEvents;
+
+        const events = {
+            click: (e) => {
+                this.rowClick(e, click);
+            },
+            dblclick: (e) => {
+                this.rowDblclick(e, dblclick);
+            },
+            contextmenu: (e) => {
+                this.rowContextmenu(e, contextmenu);
+            },
+            mouseenter: (e) => {
+                this.rowMouseenter(e, mouseenter);
+            },
+            mouseleave: (e) => {
+                this.rowMouseleave(e, mouseleave);
+            },
+            mousemove: (e) => {
+                this.rowMousemove(e, mousemove);
+            },
+            mouseover: (e) => {
+                this.rowMouseover(e, mouseover);
+            },
+            mousedown: (e) => {
+                this.rowMousedown(e, mousedown);
+            },
+            mouseup: (e) => {
+                this.rowMouseup(e, mouseup);
+            },
+        };
+
+        const trProps = {
+            key: getDomResizeObserverCompKey(
+                rowIndex,
+                this.columnsOptionResetTime,
+            ),
+            class: clsName("header-tr"),
+            props: {
+                tagName: "tr",
+            },
+            on: {
+                "on-dom-resize-change": trHeightChange,
+            },
+            nativeOn: events,
+        };
+
+        return (
+            <VueDomResizeObserver {...trProps}>
+                {groupColumn.map((groupColumnItem) => {
+                    // th props
+                    const thProps = {
+                        key: groupColumnItem.key,
+                        props: {
+                            groupColumn,
+                            groupColumnItem,
+                            colgroups,
+                            headerRows,
+                            fixedHeader,
+                            isGroupHeader: this.isGroupHeader,
+                            rowIndex,
+                            checkboxOption,
+                            sortOption,
+                            sortColumns,
+                            cellStyleOption,
+                            eventCustomOption: this.eventCustomOption,
+                            cellSelectionData,
+                            cellSelectionRangeData: this.cellSelectionRangeData,
+                            headerIndicatorColKeys: this.headerIndicatorColKeys,
+                        },
+                    };
+
+                    return <HeaderTh {...thProps} />;
+                })}
+            </VueDomResizeObserver>
+        );
+    },
+};

package/packages/ve-table/src/header/index.jsx

@@ -0,0 +1,195 @@
+import { clsName } from "../util";
+import HeaderTr from "./header-tr";
+import { COMPS_NAME, EMIT_EVENTS } from "../util/constant";
+import emitter from "../../../src/mixins/emitter";
+export default {
+    name: COMPS_NAME.VE_TABLE_THADER,
+    mixins: [emitter],
+    props: {
+        columnsOptionResetTime: {
+            type: Number,
+            default: 0,
+        },
+        groupColumns: {
+            type: Array,
+            required: true,
+        },
+        colgroups: {
+            type: Array,
+            required: true,
+        },
+        fixedHeader: {
+            type: Boolean,
+            required: true,
+        },
+        isGroupHeader: {
+            type: Boolean,
+            required: true,
+        },
+        cellSelectionData: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // cell selection range data
+        cellSelectionRangeData: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        headerIndicatorColKeys: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        headerRows: {
+            type: Array,
+            default: function () {
+                return [];
+            },
+        },
+        // checkbox option
+        checkboxOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // sort option
+        sortOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // cell style option
+        cellStyleOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // event custom option
+        eventCustomOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+    },
+    data() {
+        return {
+            /*
+            sort columns
+            不要使用computed代替，属性动态添加会造成响应式问题
+            */
+            sortColumns: {},
+        };
+    },
+    computed: {
+        // header class
+        headerClass() {
+            return {
+                [clsName("fixed-header")]: this.fixedHeader,
+            };
+        },
+    },
+    watch: {
+        // watch colgroups
+        colgroups: {
+            handler() {
+                this.initSortColumns();
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        // sort change
+        sortChange({ currentField, sortResult }) {
+            const { sortColumns, sortOption } = this;
+            const { multipleSort, sortChange } = sortOption;
+
+            this.sortColumns[currentField] = sortResult;
+
+            if (!multipleSort) {
+                for (const field in sortColumns) {
+                    if (field !== currentField) {
+                        sortColumns[field] = "";
+                    }
+                }
+            }
+
+            this.dispatch(
+                COMPS_NAME.VE_TABLE,
+                EMIT_EVENTS.SORT_CHANGE,
+                sortColumns,
+            );
+
+            // invoke
+            sortChange(sortColumns);
+        },
+
+        // init sort columns
+        initSortColumns() {
+            const { colgroups } = this;
+            let sortColumns = {};
+            colgroups.forEach((item) => {
+                if (typeof item.sortBy === "string") {
+                    sortColumns[item.field] = item.sortBy;
+                }
+            });
+            this.sortColumns = sortColumns;
+        },
+    },
+    mounted() {
+        // receive sort change
+        this.$on(EMIT_EVENTS.SORT_CHANGE, (params) => {
+            this.sortChange(params);
+        });
+    },
+    render() {
+        const {
+            headerClass,
+            groupColumns,
+            colgroups,
+            fixedHeader,
+            headerRows,
+            checkboxOption,
+            sortOption,
+            sortColumns,
+            cellStyleOption,
+            cellSelectionData,
+        } = this;
+
+        return (
+            <thead class={headerClass}>
+                {groupColumns.map((groupColumn, rowIndex) => {
+                    const trProps = {
+                        key: rowIndex,
+                        props: {
+                            columnsOptionResetTime: this.columnsOptionResetTime,
+                            groupColumn,
+                            headerRows,
+                            colgroups,
+                            fixedHeader,
+                            isGroupHeader: this.isGroupHeader,
+                            rowIndex,
+                            checkboxOption,
+                            sortOption,
+                            sortColumns,
+                            cellStyleOption,
+                            eventCustomOption: this.eventCustomOption,
+                            cellSelectionData,
+                            cellSelectionRangeData: this.cellSelectionRangeData,
+                            headerIndicatorColKeys: this.headerIndicatorColKeys,
+                        },
+                    };
+                    return <HeaderTr {...trProps} />;
+                })}
+            </thead>
+        );
+    },
+};