ocpview-plus/src/plugins/vxeTable/index.js

A high quality Service UI components Library with Vue.js

import VXETable from "vxe-table";
import "vxe-table/lib/style.css";
import "../theme/theme-variable.css";

// ========== 全局renderer引入位置 ==========
import "./renderer/filter";
// import './renderer/edit'
// import './renderer/cell'
// ========== 全局renderer引入位置 ==========

// 全局配置
VXETable.setup({
    size: "mini", // 全局尺寸
    zIndex: 8000, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
    version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
    // loadingText: '加载中...', // 全局loading提示内容，如果为null则不显示文本
    table: {
        showHeader: true,
        keepSource: false,
        showOverflow: true,
        showHeaderOverflow: true,
        showFooterOverflow: true,
        size: null,
        autoResize: true,
        stripe: true,
        border: false,
        resizable: true,
        round: false,
        // emptyText: '暂无数据',
        rowConfig: {
            keyField: "_X_ROW_KEY", // 行数据的唯一主键字段名
            isCurrent: true, // 当鼠标点击行时，是否要高亮当前行
            isHover: true, //当鼠标移到行时，是否要高亮当前行
        },
        radioConfig: {
            trigger: "default",
        },
        checkboxConfig: {
            strict: false,
            highlight: false,
            range: false,
            trigger: "default",
        },
        sortConfig: {
            remote: false,
            trigger: "default",
            orders: ["asc", "desc", null],
            sortMethod: null,
        },
        filterConfig: {
            remote: false,
            filterMethod: null,
        },
        expandConfig: {
            trigger: "default",
            showIcon: true,
        },
        treeConfig: {
            rowField: "id",
            parentField: "parentId",
            children: "children",
            hasChild: "hasChild",
            mapChildren: "_X_ROW_CHILD",
            indent: 20,
            showIcon: true,
        },
        tooltipConfig: {
            enterable: true,
        },
        menuConfig: {
            visibleMethod() {},
        },
        editConfig: {
            mode: "cell",
            showAsterisk: true,
        },
        importConfig: {
            modes: ["insert", "covering"],
        },
        exportConfig: {
            modes: ["current", "selected"],
        },
        customConfig: {
            storage: false,
        },
        scrollX: {
            gt: 60,
        },
        scrollY: {
            enabled: true,
            gt: 60,
        },
        loading: {
            icon: "vxe-icon-spinner roll",
            // text: '加载中...'
        },
        mouseConfig: {
            selected: true,
        },
    },
    grid: {
        size: null,
        zoomConfig: {
            escRestore: true,
        },
        pagerConfig: {
            perfect: false,
        },
        toolbarConfig: {
            perfect: false,
        },
        proxyConfig: {
            autoLoad: true,
            message: true,
            props: {
                list: null, // 用于列表，读取响应数据
                result: "result", // 用于分页，读取响应数据
                total: "page.total", // 用于分页，读取总条数
            },
            beforeItem: null,
            beforeColumn: null,
            beforeQuery: null,
            afterQuery: null,
            beforeDelete: null,
            afterDelete: null,
            beforeSave: null,
            afterSave: null,
        },
    },
    pager: {
        size: null,
        border: true,
        background: true,
        autoHidden: false,
        perfect: true,
        pageSize: 10,
        pagerCount: 7,
        pageSizes: [50, 100, 200, 500],
        layouts: [
            "Sizes",
            "PrevJump",
            "PrevPage",
            "Number",
            "NextPage",
            "NextJump",
            "FullJump",
            "Total",
        ],
    },
    form: {
        preventSubmit: false,
        size: null,
        colon: false,
        validConfig: {
            autoPos: true,
        },
        tooltipConfig: {
            enterable: true,
        },
        titleAsterisk: true,
    },
    input: {
        size: null,
        transfer: false,
        parseFormat: "yyyy-MM-dd HH:mm:ss.SSS",
        labelFormat: "",
        valueFormat: "",
        startDay: 1,
        digits: 2,
        controls: true,
    },
    textarea: {
        size: null,
        autosize: {
            minRows: 1,
            maxRows: 10,
        },
    },
    select: {
        size: null,
        transfer: false,
        optionConfig: {
            keyField: "_X_OPTION_KEY", // 选项数据的唯一主键字段名
        },
        multiCharOverflow: 8,
    },
    toolbar: {
        size: null,
        import: {
            mode: "covering",
        },
        export: {
            types: ["csv", "html", "xml", "txt"],
        },
        custom: {
            showFooter: true,
        },
        buttons: [],
        tools: [],
    },
    button: {
        size: null,
        transfer: false,
    },
    radio: {
        size: null,
    },
    checkbox: {
        size: null,
    },
    switch: {
        size: null,
    },
    modal: {
        // size: null,
        minWidth: 340,
        minHeight: 200,
        lockView: true,
        mask: true,
        duration: 3000,
        marginSize: 0,
        dblclickZoom: true,
        showTitleOverflow: true,
        storage: false,
    },
    list: {
        scrollY: {
            gt: 100,
        },
    },
});

const install = (app, i18n) => {
    VXETable.setup({
        // 对组件内置的提示语进行国际化翻译
        // i18n: (key, args) => i18n.global.t(key, args)
    });
    app.use(VXETable);
};

export default { install };