112 lines
5.3 KiB
TypeScript
112 lines
5.3 KiB
TypeScript
import App from '/@/App.vue';
|
||
// VXETable
|
||
import VxeUITable from 'vxe-table';
|
||
import VXETablePluginElement from 'vxe-table-plugin-element';
|
||
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx';
|
||
// import 'vxe-table/lib/style.css'; // 已在theme/vxe.scss引入
|
||
import 'vxe-table-plugin-element/dist/style.css';
|
||
// Vxe UI 组件库
|
||
import VxeUI, { VxeComponentSizeType } from 'vxe-pc-ui';
|
||
import ExcelJS from 'exceljs';
|
||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||
const vxeSize: VxeComponentSizeType = useThemeConfig().themeConfig.globalComponentSize == 'small' ? 'mini' : useThemeConfig().themeConfig.globalComponentSize == 'default' ? 'small' : 'medium';
|
||
|
||
export const setupVXETable = (app: App) => {
|
||
// 加载插件
|
||
VxeUITable.use(VXETablePluginElement);
|
||
VxeUITable.use(VXETablePluginExportXLSX, { ExcelJS: ExcelJS });
|
||
// VXETable全局配置https://vxetable.cn/v4.7/#/table/start/global
|
||
VxeUITable.setConfig({
|
||
theme: 'light', // 主题颜色
|
||
size: vxeSize, // 全局尺寸mini、small、medium/default
|
||
// i18n: (key, args) => i18n.global.t(key, args),
|
||
// zIndex: 999, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
|
||
// version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
|
||
// loadingText: '加载中...', // 全局loading提示内容，如果为null则不显示文本
|
||
table: {
|
||
border: true, // 是否带有边框
|
||
stripe: true, // 是否带有斑马纹
|
||
// keepSource: false,// 保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等（开启后影响性能，具体取决于数据量）
|
||
showOverflow: true, // 设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）
|
||
size: vxeSize, // 表格的尺寸[medium, small, mini]
|
||
autoResize: true, // 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）
|
||
round: false, // 是否为圆角边框
|
||
emptyText: '暂无数据', //
|
||
columnConfig: {
|
||
isCurrent: false, // 当鼠标点击列头时，是否要高亮当前列
|
||
isHover: false, // 当鼠标移到列头时，是否要高亮当前头
|
||
resizable: true, // 每一列是否启用列宽调整
|
||
minWidth: 70, // 每一列的最小宽度(auto, px, %)
|
||
},
|
||
rowConfig: {
|
||
isCurrent: true, // 当鼠标点击行时，是否要高亮当前行
|
||
isHover: true, // 当鼠标移到行时，是否要高亮当前行
|
||
},
|
||
radioConfig: {
|
||
strict: true, // 严格模式，选中后不能取消
|
||
highlight: true, // 高亮选中行
|
||
},
|
||
checkboxConfig: {
|
||
strict: true, // 严格模式，当数据为空或全部禁用时，列头的复选框为禁用状态
|
||
highlight: true, // 高亮勾选行
|
||
range: true, // 开启复选框范围选择功能（启用后通过鼠标在复选框的列内滑动选中或取消指定行）***全局配置貌似不生效***
|
||
trigger: 'default', // 触发方式（注：当多种功能重叠时，会同时触发）default（默认）, cell（点击单元格触发）, row（点击行触发）
|
||
},
|
||
exportConfig: {
|
||
remote: false, // 是否服务端导出
|
||
types: ['xlsx', 'csv', 'html', 'xml', 'txt'], // 可选文件类型列表
|
||
modes: ['current', 'selected', 'all'], // 输出数据的方式
|
||
},
|
||
printConfig: { modes: ['current', 'selected', 'all'] }, // 输出数据的方式
|
||
tooltipConfig: {
|
||
showAll: false, // 所有单元格开启工具提示
|
||
enterable: true, // 鼠标是否可进入到工具提示中
|
||
theme: 'dark',
|
||
},
|
||
customConfig: {
|
||
// 貌似全局设置不生效，须要单独设置
|
||
storage: {
|
||
// 是否启用 localStorage 本地保存，会将列操作状态保留在本地（需要有 id）
|
||
visible: true, // 启用显示/隐藏列状态
|
||
resizable: true, // 启用列宽状态
|
||
},
|
||
},
|
||
scrollX: {
|
||
enabled: true, // 是否默认开启横向虚拟滚动
|
||
gt: 30, // 指定大于指定列时自动启动横向虚拟滚动
|
||
},
|
||
scrollY: {
|
||
scrollToTopOnChange: true, // 当数据源被更改时，自动将纵向滚动条滚动到顶部
|
||
enabled: true, // 是否默认开启纵向虚拟滚动
|
||
gt: 50, // 当数据大于指定数量时自动触发启用虚拟滚动
|
||
},
|
||
},
|
||
grid: {
|
||
size: vxeSize,
|
||
toolbarConfig: {
|
||
size: vxeSize, // 尺寸 medium, small, mini
|
||
perfect: false, // 配套的样式
|
||
},
|
||
zoomConfig: { escRestore: true }, // 是否允许通过按下 ESC 键还原
|
||
},
|
||
pager: {
|
||
size: vxeSize,
|
||
background: true, // 带背景颜色
|
||
perfect: false, // 配套的样式
|
||
autoHidden: false, // 当只有一页时自动隐藏
|
||
pageSize: 50, // 每页大小
|
||
pagerCount: 10, // 显示页码按钮的数量
|
||
pageSizes: [50, 100, 200, 500, 1000, 2000], // 每页大小选项列表
|
||
layouts: ['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'PageCount', 'Total'], // 自定义布局
|
||
},
|
||
});
|
||
// 安装UI组件
|
||
app.use(VxeUI);
|
||
app.use(VxeUITable);
|
||
// 给 vue 实例挂载内部对象，例如：
|
||
// app.config.globalProperties.$XModal = VxeUI.modal
|
||
// app.config.globalProperties.$XPrint = VxeUI.print
|
||
// app.config.globalProperties.$XSaveFile = VxeUI.saveFile
|
||
// app.config.globalProperties.$XReadFile = VxeUI.readFile
|
||
};
|