diff --git a/yudao-ui-admin-vue3/package.json b/yudao-ui-admin-vue3/package.json
index ca72ce7c1..12b6dabc0 100644
--- a/yudao-ui-admin-vue3/package.json
+++ b/yudao-ui-admin-vue3/package.json
@@ -51,7 +51,9 @@
"vue-i18n": "9.2.2",
"vue-router": "^4.1.5",
"vue-types": "^4.2.1",
- "web-storage-cache": "^1.1.1"
+ "vxe-table": "^4.3.5",
+ "web-storage-cache": "^1.1.1",
+ "xe-utils": "^3.5.7"
},
"devDependencies": {
"@commitlint/cli": "^17.1.2",
diff --git a/yudao-ui-admin-vue3/src/components/ProTable/index.ts b/yudao-ui-admin-vue3/src/components/ProTable/index.ts
new file mode 100644
index 000000000..778514602
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/ProTable/index.ts
@@ -0,0 +1,3 @@
+import ProTable from './src/ProTable.vue'
+
+export { ProTable }
diff --git a/yudao-ui-admin-vue3/src/components/ProTable/src/ProTable.vue b/yudao-ui-admin-vue3/src/components/ProTable/src/ProTable.vue
new file mode 100644
index 000000000..6921afcad
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/ProTable/src/ProTable.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { PropType, reactive, ref } from 'vue'
+import { VxeGrid, VxeGridProps, VxeTableInstance } from 'vxe-table'
+
+const props = defineProps({
+ options: {
+ type: Object as PropType<VxeGridProps>,
+ default: () => ({})
+ }
+})
+const xGrid = ref<VxeTableInstance>()
+
+const gridOptions = reactive<VxeGridProps>({
+ height: 300,
+ align: null,
+ columnConfig: {
+ resizable: true
+ },
+ columns: [],
+ toolbarConfig: {},
+ data: []
+})
+const init = () => {
+ console.log(props.options)
+}
+init()
+</script>
+
+<template>
+ <ContentWrap>
+ <vxe-grid ref="xGrid" v-bind="gridOptions" show-footer class="pro-table-scrollbar" />
+ </ContentWrap>
+</template>
+
+<style scoped>
+/*滚动条整体部分*/
+.pro-table-scrollbar ::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+/*滚动条的轨道*/
+.pro-table-scrollbar ::-webkit-scrollbar-track {
+ background-color: #ffffff;
+}
+/*滚动条里面的小方块，能向上向下移动*/
+.pro-table-scrollbar ::-webkit-scrollbar-thumb {
+ background-color: #bfbfbf;
+ border-radius: 5px;
+ border: 1px solid #f1f1f1;
+ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+.pro-table-scrollbar ::-webkit-scrollbar-thumb:hover {
+ background-color: #a8a8a8;
+}
+.pro-table-scrollbar ::-webkit-scrollbar-thumb:active {
+ background-color: #787878;
+}
+/*边角，即两个滚动条的交汇处*/
+.pro-table-scrollbar ::-webkit-scrollbar-corner {
+ background-color: #ffffff;
+}
+</style>
diff --git a/yudao-ui-admin-vue3/src/main.ts b/yudao-ui-admin-vue3/src/main.ts
index 785f3e9e4..03369099d 100644
--- a/yudao-ui-admin-vue3/src/main.ts
+++ b/yudao-ui-admin-vue3/src/main.ts
@@ -16,6 +16,9 @@ import { setupGlobCom } from '@/components'
// 引入element-plus
import { setupElementPlus } from '@/plugins/elementPlus'
+// 引入vxe-table
+import { setupVxeTable } from '@/plugins/vxeTable'
+
// 引入全局样式
import '@/styles/index.less'
@@ -44,6 +47,8 @@ const setupAll = async () => {
setupElementPlus(app)
+ setupVxeTable(app)
+
setupRouter(app)
setupAuth(app)
diff --git a/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts b/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
new file mode 100644
index 000000000..8a8ce8c87
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
@@ -0,0 +1,120 @@
+import { App, unref } from 'vue'
+import 'xe-utils'
+import XEUtils from 'xe-utils'
+import { i18n } from '@/plugins/vueI18n'
+import zhCN from 'vxe-table/es/locale/lang/zh-CN'
+import enUS from 'vxe-table/lib/locale/lang/en-US'
+import {
+ // 全局对象
+ VXETable,
+
+ // 表格功能
+ Filter,
+ Edit,
+ Menu,
+ Export,
+ Keyboard,
+ Validator,
+
+ // 可选组件
+ Icon,
+ Column,
+ Colgroup,
+ Grid,
+ Tooltip,
+ Toolbar,
+ Pager,
+ Form,
+ FormItem,
+ FormGather,
+ Checkbox,
+ CheckboxGroup,
+ Radio,
+ RadioGroup,
+ RadioButton,
+ Switch,
+ Input,
+ Select,
+ Optgroup,
+ Option,
+ Textarea,
+ Button,
+ Modal,
+ List,
+ Pulldown,
+
+ // 表格
+ Table
+} from 'vxe-table'
+
+// 全局默认参数
+VXETable.setup({
+ size: 'medium', // 全局尺寸
+ version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
+ zIndex: 1008, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
+ loadingText: '加载中...', // 全局loading提示内容，如果为null则不显示文本
+ table: {
+ // 自动监听父元素的变化去重新计算表格
+ autoResize: true,
+ emptyText: '暂无数据',
+ // 鼠标移到行是否要高亮显示
+ highlightHoverRow: true
+ },
+ pager: {
+ autoHidden: false,
+ perfect: true,
+ pageSize: 10,
+ pagerCount: 7,
+ pageSizes: [10, 15, 20, 50, 100],
+ layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
+ },
+ input: {
+ clearable: true
+ },
+ i18n: (key, args) => {
+ return unref(i18n.global.locale) === 'zh'
+ ? XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
+ : XEUtils.toFormatString(XEUtils.get(enUS, key), args)
+ }
+})
+export const setupVxeTable = (app: App<Element>) => {
+ // 表格功能
+ app.use(Filter).use(Edit).use(Menu).use(Export).use(Keyboard).use(Validator)
+
+ // 可选组件
+ app
+ .use(Icon)
+ .use(Column)
+ .use(Colgroup)
+ .use(Grid)
+ .use(Tooltip)
+ .use(Toolbar)
+ .use(Pager)
+ .use(Form)
+ .use(FormItem)
+ .use(FormGather)
+ .use(Checkbox)
+ .use(CheckboxGroup)
+ .use(Radio)
+ .use(RadioGroup)
+ .use(RadioButton)
+ .use(Switch)
+ .use(Input)
+ .use(Select)
+ .use(Optgroup)
+ .use(Option)
+ .use(Textarea)
+ .use(Button)
+ .use(Modal)
+ .use(List)
+ .use(Pulldown)
+
+ // 安装表格
+ .use(Table)
+
+ // 给 vue 实例挂载内部对象，例如：
+ // app.config.globalProperties.$XModal = VXETable.modal
+ // app.config.globalProperties.$XPrint = VXETable.print
+ // app.config.globalProperties.$XSaveFile = VXETable.saveFile
+ // app.config.globalProperties.$XReadFile = VXETable.readFile
+}
diff --git a/yudao-ui-admin-vue3/vite.config.ts b/yudao-ui-admin-vue3/vite.config.ts
index 83b03c0bc..12d958c83 100644
--- a/yudao-ui-admin-vue3/vite.config.ts
+++ b/yudao-ui-admin-vue3/vite.config.ts
@@ -6,7 +6,7 @@ import WindiCSS from 'vite-plugin-windicss'
import VueJsx from '@vitejs/plugin-vue-jsx'
import EslintPlugin from 'vite-plugin-eslint'
import VueI18n from '@intlify/vite-plugin-vue-i18n'
-import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
+import { createStyleImportPlugin, ElementPlusResolve, VxeTableResolve } from 'vite-plugin-style-import'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import PurgeIcons from 'vite-plugin-purge-icons'
import { createHtmlPlugin } from 'vite-plugin-html'
@@ -56,13 +56,19 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
VueJsx(),
WindiCSS(),
createStyleImportPlugin({
- resolves: [ElementPlusResolve()],
+ resolves: [ElementPlusResolve(),VxeTableResolve()],
libs: [{
libraryName: 'element-plus',
esModule: true,
resolveStyle: (name) => {
return `element-plus/es/components/${name.substring(3)}/style/css`
}
+ },{
+ libraryName: 'vxe-table',
+ esModule: true,
+ resolveStyle: (name) => {
+ return `vxe-table/es/${name}/style.css`
+ }
}]
}),
EslintPlugin({