easydo-ops/src/vxeTable.js

import XEUtils from "xe-utils";
import VxeUI from "vxe-pc-ui";
import VxeUITable from "vxe-table";
import VxeUIPluginRenderElement from "@vxe-ui/plugin-render-element";
import VxeUIPluginExportXLSX from "@vxe-ui/plugin-export-xlsx";
import ExcelJS from "exceljs";
import config from "@/config/select";

import "vxe-pc-ui/lib/style.css";
import "vxe-table/lib/style.css";
import "@vxe-ui/plugin-render-element/dist/style.css";
// 黑夜模式
localStorage.getItem("APP_DARK") && VxeUITable.VxeUI.setTheme("dark");

// 自定义renderer
import tableSearch from "@/components/scTable/renderer/table-search";
import formSelect from "@/components/scTable/renderer/form-select";
import formRadio from "@/components/scTable/renderer/form-radio";
import cellTag from "@/components/scTable/renderer/cell-tag";
import cellEdit from "@/components/scTable/renderer/cell-edit";

VxeUI.renderer.mixin({
    "$table-search": {
        renderToolbarButton(renderOpts, params) {
            return h(tableSearch, { renderOpts, params });
        }
    },

    "$form-select": {
        renderFormItemContent(renderOpts, params) {
            const field = XEUtils.get(params, "field")
            const defaultValue = XEUtils.get(params.data, field);

            const storageKey = XEUtils.get(renderOpts, "storageKey")
            const api = XEUtils.get(renderOpts, "api", {})
            const slot = XEUtils.get(renderOpts, "slot", {})
            const props = XEUtils.get(renderOpts, "props", {})
            const options = XEUtils.get(renderOpts, "options", [])
            const optionProps = XEUtils.get(renderOpts, "optionProps", config.props)
            const events = XEUtils.get(renderOpts, "events", {})

            return h(formSelect, { renderOpts: { defaultValue, storageKey, api, props, options, optionProps, slot, events }, params });
        }
    },

    "$form-radio": {
        renderFormItemContent(renderOpts, params) {
            return h(formRadio, { renderOpts, params });
        }
    },

    "$cell-tag": {
        renderTableCell(renderOpts, params) {
            const field = XEUtils.get(params, "column.field")
            const defaultValue = params.$grid.getCellLabel(params.row, field)

            const props = XEUtils.get(renderOpts, "props", {})
            const options = XEUtils.get(renderOpts, "options", {})
            return h(cellTag, { renderOpts: { defaultValue, props, options }, params });
        }
    },

    "$cell-edit": {
        tableAutoFocus: ".el-input__inner",
        renderTableEdit(renderOpts, params) {
            const field = XEUtils.get(params, "column.field")
            const row = params.$grid.getData(params.rowIndex)
            const defaultValue = XEUtils.get(row, field)

            const type = XEUtils.get(renderOpts, "type", "input")
            const props = XEUtils.get(renderOpts, "props", {})
            const options = XEUtils.get(renderOpts, "options", {})
            const optionProps = XEUtils.get(renderOpts, "optionProps", config.props)
            const events = XEUtils.get(renderOpts, "events", {})

            return h(cellEdit, { renderOpts: { type, defaultValue, props, options, optionProps, events }, params });
        }

    }
})
VxeUI.use(VxeUIPluginRenderElement).use(VxeUIPluginExportXLSX, { ExcelJS });

export default {
	install(app) {
        app.use(VxeUI).use(VxeUITable);
	}
}