feat: vxeTable searchInfo demo (#3223) close #3011

src/api/demo/model/systemModel.ts

@@ -3,6 +3,7 @@ import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
 export type AccountParams = BasicPageParams & {
   account?: string;
   nickname?: string;
+  [key: string]: any;
 };
 
 export type RoleParams = {

src/locales/lang/en/routes/demo.json

@@ -1,178 +1,179 @@
 {
   "charts": {
-    "baiduMap": "Baidu map", 
-    "aMap": "A map", 
-    "googleMap": "Google map", 
-    "charts": "Chart", 
-    "map": "Map", 
-    "line": "Line", 
+    "baiduMap": "Baidu map",
+    "aMap": "A map",
+    "googleMap": "Google map",
+    "charts": "Chart",
+    "map": "Map",
+    "line": "Line",
     "pie": "Pie"
-  }, 
+  },
   "comp": {
-    "comp": "Component", 
-    "basic": "Basic", 
-    "transition": "Animation", 
-    "countTo": "Count To", 
-    "scroll": "Scroll", 
-    "scrollBasic": "Basic", 
-    "scrollAction": "Scroll Function", 
-    "virtualScroll": "Virtual Scroll", 
-    "tree": "Tree", 
-    "treeBasic": "Basic", 
-    "editTree": "Searchable/toolbar", 
-    "actionTree": "Function operation", 
-    "modal": "Modal", 
-    "drawer": "Drawer", 
-    "desc": "Desc", 
-    "verify": "Verify", 
-    "verifyDrag": "Drag ", 
-    "verifyRotate": "Picture Restore", 
-    "qrcode": "QR code", 
-    "strength": "Password strength", 
-    "upload": "Upload", 
-    "loading": "Loading", 
-    "time": "Relative Time", 
-    "cropperImage": "Cropper Image", 
+    "comp": "Component",
+    "basic": "Basic",
+    "transition": "Animation",
+    "countTo": "Count To",
+    "scroll": "Scroll",
+    "scrollBasic": "Basic",
+    "scrollAction": "Scroll Function",
+    "virtualScroll": "Virtual Scroll",
+    "tree": "Tree",
+    "treeBasic": "Basic",
+    "editTree": "Searchable/toolbar",
+    "actionTree": "Function operation",
+    "modal": "Modal",
+    "drawer": "Drawer",
+    "desc": "Desc",
+    "verify": "Verify",
+    "verifyDrag": "Drag ",
+    "verifyRotate": "Picture Restore",
+    "qrcode": "QR code",
+    "strength": "Password strength",
+    "upload": "Upload",
+    "loading": "Loading",
+    "time": "Relative Time",
+    "cropperImage": "Cropper Image",
     "cardList": "Card List"
-  }, 
+  },
   "editor": {
-    "editor": "Editor", 
-    "jsonEditor": "Json editor", 
-    "markdown": "Markdown editor", 
-    "tinymce": "Rich text", 
-    "tinymceBasic": "Basic", 
+    "editor": "Editor",
+    "jsonEditor": "Json editor",
+    "markdown": "Markdown editor",
+    "tinymce": "Rich text",
+    "tinymceBasic": "Basic",
     "tinymceForm": "embedded form"
-  }, 
+  },
   "excel": {
-    "excel": "Excel", 
-    "customExport": "Select export format", 
-    "jsonExport": "JSON data export", 
-    "arrayExport": "Array data export", 
+    "excel": "Excel",
+    "customExport": "Select export format",
+    "jsonExport": "JSON data export",
+    "arrayExport": "Array data export",
     "importExcel": "Import"
-  }, 
+  },
   "feat": {
-    "feat": "Page Function", 
-    "icon": "Icon", 
-    "tabs": "Tabs", 
-    "tabDetail": "Tab Detail", 
-    "sessionTimeout": "Session Timeout", 
-    "print": "Print", 
-    "contextMenu": "Context Menu", 
-    "download": "Download", 
-    "clickOutSide": "ClickOutSide", 
-    "imgPreview": "Picture Preview", 
-    "copy": "Clipboard", 
-    "ellipsis": "EllipsisText", 
-    "msg": "Message prompt", 
-    "watermark": "Watermark", 
-    "ripple": "Ripple", 
-    "fullScreen": "Full Screen", 
-    "errorLog": "Error Log", 
-    "tab": "Tab with parameters", 
-    "tab1": "Tab with parameter 1", 
-    "tab2": "Tab with parameter 2", 
-    "menu": "Menu with parameters", 
-    "menu1": "Menu with parameters 1", 
-    "menu2": "Menu with parameters 2", 
-    "ws": "Websocket test", 
-    "breadcrumb": "Breadcrumbs", 
-    "breadcrumbFlat": "Flat Mode", 
-    "breadcrumbFlatDetail": "Flat mode details", 
-    "requestDemo": "Retry request demo", 
-    "breadcrumbChildren": "Level mode", 
+    "feat": "Page Function",
+    "icon": "Icon",
+    "tabs": "Tabs",
+    "tabDetail": "Tab Detail",
+    "sessionTimeout": "Session Timeout",
+    "print": "Print",
+    "contextMenu": "Context Menu",
+    "download": "Download",
+    "clickOutSide": "ClickOutSide",
+    "imgPreview": "Picture Preview",
+    "copy": "Clipboard",
+    "ellipsis": "EllipsisText",
+    "msg": "Message prompt",
+    "watermark": "Watermark",
+    "ripple": "Ripple",
+    "fullScreen": "Full Screen",
+    "errorLog": "Error Log",
+    "tab": "Tab with parameters",
+    "tab1": "Tab with parameter 1",
+    "tab2": "Tab with parameter 2",
+    "menu": "Menu with parameters",
+    "menu1": "Menu with parameters 1",
+    "menu2": "Menu with parameters 2",
+    "ws": "Websocket test",
+    "breadcrumb": "Breadcrumbs",
+    "breadcrumbFlat": "Flat Mode",
+    "breadcrumbFlatDetail": "Flat mode details",
+    "requestDemo": "Retry request demo",
+    "breadcrumbChildren": "Level mode",
     "breadcrumbChildrenDetail": "Level mode detail"
-  }, 
+  },
   "flow": {
-    "name": "Graphics editor", 
+    "name": "Graphics editor",
     "flowChart": "FlowChart"
-  }, 
+  },
   "form": {
-    "form": "Form", 
-    "basic": "Basic", 
-    "useForm": "useForm", 
-    "refForm": "RefForm", 
-    "advancedForm": "Shrinkable", 
-    "ruleForm": "Form validation", 
-    "dynamicForm": "Dynamic", 
-    "customerForm": "Custom", 
-    "appendForm": "Append", 
+    "form": "Form",
+    "basic": "Basic",
+    "useForm": "useForm",
+    "refForm": "RefForm",
+    "advancedForm": "Shrinkable",
+    "ruleForm": "Form validation",
+    "dynamicForm": "Dynamic",
+    "customerForm": "Custom",
+    "appendForm": "Append",
     "tabsForm": "TabsForm"
-  }, 
+  },
   "iframe": {
-    "frame": "External", 
-    "antv": "antVue doc (embedded)", 
-    "doc": "Project doc (embedded)", 
+    "frame": "External",
+    "antv": "antVue doc (embedded)",
+    "doc": "Project doc (embedded)",
     "docExternal": "Project doc (external)"
-  }, 
+  },
   "level": {
     "level": "MultiMenu"
-  }, 
+  },
   "page": {
-    "page": "Page", 
-    "form": "Form", 
-    "formBasic": "Basic Form", 
-    "formStep": "Step Form", 
-    "formHigh": "Advanced Form", 
-    "desc": "Details", 
-    "descBasic": "Basic Details", 
-    "descHigh": "Advanced Details", 
-    "result": "Result", 
-    "resultSuccess": "Success", 
-    "resultFail": "Failed", 
-    "account": "Personal", 
-    "accountCenter": "Personal Center", 
-    "accountSetting": "Personal Settings", 
-    "exception": "Exception", 
-    "netWorkError": "Network Error", 
-    "notData": "No data", 
-    "list": "List page", 
-    "listCard": "Card list", 
-    "basic": "Basic list", 
-    "listBasic": "Basic list", 
+    "page": "Page",
+    "form": "Form",
+    "formBasic": "Basic Form",
+    "formStep": "Step Form",
+    "formHigh": "Advanced Form",
+    "desc": "Details",
+    "descBasic": "Basic Details",
+    "descHigh": "Advanced Details",
+    "result": "Result",
+    "resultSuccess": "Success",
+    "resultFail": "Failed",
+    "account": "Personal",
+    "accountCenter": "Personal Center",
+    "accountSetting": "Personal Settings",
+    "exception": "Exception",
+    "netWorkError": "Network Error",
+    "notData": "No data",
+    "list": "List page",
+    "listCard": "Card list",
+    "basic": "Basic list",
+    "listBasic": "Basic list",
     "listSearch": "Search list"
-  }, 
+  },
   "permission": {
-    "permission": "Permission", 
-    "front": "front-end", 
-    "frontPage": "Page", 
-    "frontBtn": "Button", 
-    "frontTestA": "Test page A", 
-    "frontTestB": "Test page B", 
-    "back": "background", 
-    "backPage": "Page", 
+    "permission": "Permission",
+    "front": "front-end",
+    "frontPage": "Page",
+    "frontBtn": "Button",
+    "frontTestA": "Test page A",
+    "frontTestB": "Test page B",
+    "back": "background",
+    "backPage": "Page",
     "backBtn": "Button"
-  }, 
+  },
   "setup": {
     "page": "Intro page"
-  }, 
+  },
   "system": {
-    "moduleName": "System management", 
-    "account": "Account management", 
-    "account_detail": "Account detail", 
-    "password": "Change password", 
-    "dept": "Department management", 
-    "menu": "Menu management", 
+    "moduleName": "System management",
+    "account": "Account management",
+    "vxeTableAccount": "Account management(VxeTable)",
+    "account_detail": "Account detail",
+    "password": "Change password",
+    "dept": "Department management",
+    "menu": "Menu management",
     "role": "Role management"
-  }, 
+  },
   "table": {
-    "table": "Table", 
-    "basic": "Basic", 
-    "treeTable": "Tree", 
-    "fetchTable": "Remote loading", 
-    "fixedColumn": "Fixed column", 
-    "customerCell": "Custom column", 
-    "formTable": "Open search", 
-    "useTable": "UseTable", 
-    "refTable": "RefTable", 
-    "multipleHeader": "MultiLevel header", 
-    "mergeHeader": "Merge cells", 
-    "expandTable": "Expandable table", 
-    "fixedHeight": "Fixed height", 
-    "footerTable": "Footer", 
-    "editCellTable": "Editable cell", 
-    "editRowTable": "Editable row", 
-    "authColumn": "Auth column", 
-    "resizeParentHeightTable": "resizeParentHeightTable", 
+    "table": "Table",
+    "basic": "Basic",
+    "treeTable": "Tree",
+    "fetchTable": "Remote loading",
+    "fixedColumn": "Fixed column",
+    "customerCell": "Custom column",
+    "formTable": "Open search",
+    "useTable": "UseTable",
+    "refTable": "RefTable",
+    "multipleHeader": "MultiLevel header",
+    "mergeHeader": "Merge cells",
+    "expandTable": "Expandable table",
+    "fixedHeight": "Fixed height",
+    "footerTable": "Footer",
+    "editCellTable": "Editable cell",
+    "editRowTable": "Editable row",
+    "authColumn": "Auth column",
+    "resizeParentHeightTable": "resizeParentHeightTable",
     "vxeTable": "VxeTable"
   }
-}
+}

src/locales/lang/zh-CN/routes/demo.json

@@ -1,177 +1,178 @@
 {
   "charts": {
-    "baiduMap": "百度地图", 
-    "aMap": "高德地图", 
-    "googleMap": "谷歌地图", 
-    "charts": "图表", 
-    "map": "地图", 
-    "line": "折线图", 
+    "baiduMap": "百度地图",
+    "aMap": "高德地图",
+    "googleMap": "谷歌地图",
+    "charts": "图表",
+    "map": "地图",
+    "line": "折线图",
     "pie": "饼图"
-  }, 
+  },
   "comp": {
-    "comp": "组件", 
-    "basic": "基础组件", 
-    "transition": "动画组件", 
-    "countTo": "数字动画", 
-    "scroll": "滚动组件", 
-    "scrollBasic": "基础滚动", 
-    "scrollAction": "滚动函数", 
-    "virtualScroll": "虚拟滚动", 
-    "tree": "Tree", 
-    "treeBasic": "基础树", 
-    "editTree": "可搜索/工具栏", 
-    "actionTree": "函数操作示例", 
-    "modal": "弹窗扩展", 
-    "drawer": "抽屉扩展", 
-    "desc": "详情组件", 
-    "verify": "验证组件", 
-    "verifyDrag": "拖拽校验", 
-    "verifyRotate": "图片还原", 
-    "qrcode": "二维码组件", 
-    "strength": "密码强度组件", 
-    "upload": "上传组件", 
-    "loading": "Loading", 
-    "time": "相对时间", 
-    "cropperImage": "图片裁剪", 
+    "comp": "组件",
+    "basic": "基础组件",
+    "transition": "动画组件",
+    "countTo": "数字动画",
+    "scroll": "滚动组件",
+    "scrollBasic": "基础滚动",
+    "scrollAction": "滚动函数",
+    "virtualScroll": "虚拟滚动",
+    "tree": "Tree",
+    "treeBasic": "基础树",
+    "editTree": "可搜索/工具栏",
+    "actionTree": "函数操作示例",
+    "modal": "弹窗扩展",
+    "drawer": "抽屉扩展",
+    "desc": "详情组件",
+    "verify": "验证组件",
+    "verifyDrag": "拖拽校验",
+    "verifyRotate": "图片还原",
+    "qrcode": "二维码组件",
+    "strength": "密码强度组件",
+    "upload": "上传组件",
+    "loading": "Loading",
+    "time": "相对时间",
+    "cropperImage": "图片裁剪",
     "cardList": "卡片列表"
-  }, 
+  },
   "editor": {
-    "editor": "编辑器", 
-    "jsonEditor": "Json编辑器", 
-    "markdown": "markdown编辑器", 
-    "tinymce": "富文本", 
-    "tinymceBasic": "基础使用", 
+    "editor": "编辑器",
+    "jsonEditor": "Json编辑器",
+    "markdown": "markdown编辑器",
+    "tinymce": "富文本",
+    "tinymceBasic": "基础使用",
     "tinymceForm": "嵌入form"
-  }, 
+  },
   "excel": {
-    "excel": "Excel", 
-    "customExport": "选择导出格式", 
-    "jsonExport": "JSON数据导出", 
-    "arrayExport": "Array数据导出", 
+    "excel": "Excel",
+    "customExport": "选择导出格式",
+    "jsonExport": "JSON数据导出",
+    "arrayExport": "Array数据导出",
     "importExcel": "导入"
-  }, 
+  },
   "feat": {
-    "feat": "功能", 
-    "icon": "图标", 
-    "sessionTimeout": "登录过期", 
-    "tabs": "标签页操作", 
-    "tabDetail": "标签详情页", 
-    "print": "打印", 
-    "contextMenu": "右键菜单", 
-    "download": "文件下载", 
-    "clickOutSide": "ClickOutSide组件", 
-    "imgPreview": "图片预览", 
-    "copy": "剪切板", 
-    "ellipsis": "文本省略", 
-    "msg": "消息提示", 
-    "watermark": "水印", 
-    "ripple": "水波纹", 
-    "fullScreen": "全屏", 
-    "errorLog": "错误日志", 
-    "tab": "Tab带参", 
-    "tab1": "Tab带参1", 
-    "tab2": "Tab带参2", 
-    "menu": "Menu带参", 
-    "menu1": "Menu带参1", 
-    "menu2": "Menu带参2", 
-    "ws": "websocket测试", 
-    "breadcrumb": "面包屑导航", 
-    "breadcrumbFlat": "平级模式", 
-    "requestDemo": "测试请求重试", 
-    "breadcrumbFlatDetail": "平级详情", 
-    "breadcrumbChildren": "层级模式", 
+    "feat": "功能",
+    "icon": "图标",
+    "sessionTimeout": "登录过期",
+    "tabs": "标签页操作",
+    "tabDetail": "标签详情页",
+    "print": "打印",
+    "contextMenu": "右键菜单",
+    "download": "文件下载",
+    "clickOutSide": "ClickOutSide组件",
+    "imgPreview": "图片预览",
+    "copy": "剪切板",
+    "ellipsis": "文本省略",
+    "msg": "消息提示",
+    "watermark": "水印",
+    "ripple": "水波纹",
+    "fullScreen": "全屏",
+    "errorLog": "错误日志",
+    "tab": "Tab带参",
+    "tab1": "Tab带参1",
+    "tab2": "Tab带参2",
+    "menu": "Menu带参",
+    "menu1": "Menu带参1",
+    "menu2": "Menu带参2",
+    "ws": "websocket测试",
+    "breadcrumb": "面包屑导航",
+    "breadcrumbFlat": "平级模式",
+    "requestDemo": "测试请求重试",
+    "breadcrumbFlatDetail": "平级详情",
+    "breadcrumbChildren": "层级模式",
     "breadcrumbChildrenDetail": "层级详情"
-  }, 
+  },
   "flow": {
-    "name": "图形编辑器", 
+    "name": "图形编辑器",
     "flowChart": "流程图"
-  }, 
+  },
   "form": {
-    "form": "Form", 
-    "basic": "基础表单", 
-    "useForm": "useForm", 
-    "refForm": "RefForm", 
-    "advancedForm": "可收缩表单", 
-    "ruleForm": "表单验证", 
-    "dynamicForm": "动态表单", 
-    "customerForm": "自定义组件", 
-    "appendForm": "表单增删示例", 
+    "form": "Form",
+    "basic": "基础表单",
+    "useForm": "useForm",
+    "refForm": "RefForm",
+    "advancedForm": "可收缩表单",
+    "ruleForm": "表单验证",
+    "dynamicForm": "动态表单",
+    "customerForm": "自定义组件",
+    "appendForm": "表单增删示例",
     "tabsForm": "标签页+多级field"
-  }, 
+  },
   "iframe": {
-    "frame": "外部页面", 
-    "antv": "antVue文档(内嵌)", 
-    "doc": "项目文档(内嵌)", 
+    "frame": "外部页面",
+    "antv": "antVue文档(内嵌)",
+    "doc": "项目文档(内嵌)",
     "docExternal": "项目文档(外链)"
-  }, 
+  },
   "level": {
     "level": "多级菜单"
-  }, 
+  },
   "page": {
-    "page": "页面", 
-    "form": "表单页", 
-    "formBasic": "基础表单", 
-    "formStep": "分步表单", 
-    "formHigh": "高级表单", 
-    "desc": "详情页", 
-    "descBasic": "基础详情页", 
-    "descHigh": "高级详情页", 
-    "result": "结果页", 
-    "resultSuccess": "成功页", 
-    "resultFail": "失败页", 
-    "account": "个人页", 
-    "accountCenter": "个人中心", 
-    "accountSetting": "个人设置", 
-    "exception": "异常页", 
-    "netWorkError": "网络错误", 
-    "notData": "无数据", 
-    "list": "列表页", 
-    "listCard": "卡片列表", 
-    "listBasic": "标准列表", 
+    "page": "页面",
+    "form": "表单页",
+    "formBasic": "基础表单",
+    "formStep": "分步表单",
+    "formHigh": "高级表单",
+    "desc": "详情页",
+    "descBasic": "基础详情页",
+    "descHigh": "高级详情页",
+    "result": "结果页",
+    "resultSuccess": "成功页",
+    "resultFail": "失败页",
+    "account": "个人页",
+    "accountCenter": "个人中心",
+    "accountSetting": "个人设置",
+    "exception": "异常页",
+    "netWorkError": "网络错误",
+    "notData": "无数据",
+    "list": "列表页",
+    "listCard": "卡片列表",
+    "listBasic": "标准列表",
     "listSearch": "搜索列表"
-  }, 
+  },
   "permission": {
-    "permission": "权限管理", 
-    "front": "基于前端权限", 
-    "frontPage": "页面权限", 
-    "frontBtn": "按钮权限", 
-    "frontTestA": "权限测试页A", 
-    "frontTestB": "权限测试页B", 
-    "back": "基于后台权限", 
-    "backPage": "页面权限", 
+    "permission": "权限管理",
+    "front": "基于前端权限",
+    "frontPage": "页面权限",
+    "frontBtn": "按钮权限",
+    "frontTestA": "权限测试页A",
+    "frontTestB": "权限测试页B",
+    "back": "基于后台权限",
+    "backPage": "页面权限",
     "backBtn": "按钮权限"
-  }, 
+  },
   "setup": {
     "page": "引导页"
-  }, 
+  },
   "system": {
-    "moduleName": "系统管理", 
-    "account": "账号管理", 
-    "account_detail": "账号详情", 
-    "password": "修改密码", 
-    "dept": "部门管理", 
-    "menu": "菜单管理", 
+    "moduleName": "系统管理",
+    "account": "账号管理",
+    "vxeTableAccount": "账号管理(VxeTable)",
+    "account_detail": "账号详情",
+    "password": "修改密码",
+    "dept": "部门管理",
+    "menu": "菜单管理",
     "role": "角色管理"
-  }, 
+  },
   "table": {
-    "table": "Table", 
-    "basic": "基础表格", 
-    "treeTable": "树形表格", 
-    "fetchTable": "远程加载示例", 
-    "fixedColumn": "固定列", 
-    "customerCell": "自定义列", 
-    "formTable": "开启搜索区域", 
-    "useTable": "UseTable", 
-    "refTable": "RefTable", 
-    "multipleHeader": "多级表头", 
-    "mergeHeader": "合并单元格", 
-    "expandTable": "可展开表格", 
-    "fixedHeight": "定高/头部自定义", 
-    "footerTable": "表尾行合计", 
-    "editCellTable": "可编辑单元格", 
-    "editRowTable": "可编辑行", 
-    "authColumn": "权限列", 
-    "resizeParentHeightTable": "继承父元素高度", 
+    "table": "Table",
+    "basic": "基础表格",
+    "treeTable": "树形表格",
+    "fetchTable": "远程加载示例",
+    "fixedColumn": "固定列",
+    "customerCell": "自定义列",
+    "formTable": "开启搜索区域",
+    "useTable": "UseTable",
+    "refTable": "RefTable",
+    "multipleHeader": "多级表头",
+    "mergeHeader": "合并单元格",
+    "expandTable": "可展开表格",
+    "fixedHeight": "定高/头部自定义",
+    "footerTable": "表尾行合计",
+    "editCellTable": "可编辑单元格",
+    "editRowTable": "可编辑行",
+    "authColumn": "权限列",
+    "resizeParentHeightTable": "继承父元素高度",
     "vxeTable": "VxeTable"
   }
-}
+}

src/router/routes/modules/demo/system.ts

@@ -24,6 +24,15 @@ const system: AppRouteModule = {
       component: () => import('/@/views/demo/system/account/index.vue'),
     },
     {
+      path: 'vxeTableAccount',
+      name: 'VxeTableAccountManagement',
+      meta: {
+        title: t('routes.demo.system.vxeTableAccount'),
+        ignoreKeepAlive: false,
+      },
+      component: () => import('/@/views/demo/system/vxe-account/index.vue'),
+    },
+    {
       path: 'account_detail/:id',
       name: 'AccountDetail',
       meta: {

src/views/demo/system/account/account.data.ts

@@ -10,7 +10,7 @@ import { BasicColumn, FormSchema } from '/@/components/Table';
  *  ...
  * }
  */
-const deptMap = (() => {
+export const deptMap = (() => {
   const pDept = ['华东分部', '华南分部', '西北分部'];
   const cDept = ['研发部', '市场部', '商务部', '财务部'];
 

src/views/demo/system/vxe-account/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+    <div class="m-4 vxebasic-form-container">
+      <VxeBasicTable ref="tableRef" v-bind="gridOptions">
+        <template #action="{ row }">
+          <TableAction outside :actions="createActions(row)" />
+        </template>
+      </VxeBasicTable>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import { ActionItem, TableAction } from '/@/components/Table';
+  import { getAccountList } from '/@/api/demo/system';
+  import { PageWrapper } from '/@/components/Page';
+  import DeptTree from '../account/DeptTree.vue';
+  import { columns, searchFormSchema } from './vxeAccount.data';
+  import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '/@/components/VxeTable';
+
+  const tableRef = ref<VxeGridInstance>();
+  const searchInfo = ref();
+  const gridOptions = reactive<BasicTableProps>({
+    id: 'VxeTable',
+    keepSource: true,
+    columns: columns,
+    formConfig: {
+      enabled: true,
+      items: searchFormSchema,
+    },
+    height: 'auto',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page, form }) => {
+          return getAccountList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...form,
+            searchInfo: searchInfo.value,
+          });
+        },
+      },
+    },
+  });
+
+  const handleSelect = (deptId = '') => {
+    searchInfo.value = deptId;
+    if (tableRef.value) {
+      tableRef.value.commitProxy('query');
+    }
+  };
+
+  // 操作按钮（权限控制）
+  const createActions = (record) => {
+    const actions: ActionItem[] = [
+      {
+        label: '详情',
+        onClick: () => {
+          console.log(record);
+        },
+      },
+      {
+        label: '编辑',
+        onClick: () => {},
+      },
+      {
+        label: '删除',
+        color: 'error',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: () => {
+            tableRef.value?.remove(record);
+          },
+        },
+      },
+    ];
+
+    return actions;
+  };
+</script>
+<style lang="less" scope>
+  .vxebasic-form-container {
+    flex: auto;
+  }
+</style>

src/views/demo/system/vxe-account/vxeAccount.data.ts

@@ -0,0 +1,84 @@
+import { VxeFormItemProps, VxeGridPropTypes } from '/@/components/VxeTable';
+import { deptMap } from '../account/account.data';
+
+export const columns: VxeGridPropTypes.Columns = [
+  {
+    title: '用户名',
+    field: 'account',
+    width: 120,
+  },
+  {
+    title: '昵称',
+    field: 'nickname',
+    width: 120,
+  },
+  {
+    title: '邮箱',
+    field: 'email',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    field: 'createTime',
+    width: 180,
+  },
+  {
+    title: '角色',
+    field: 'role',
+    width: 200,
+  },
+  {
+    title: '所属部门',
+    field: 'dept',
+    slots: {
+      default: ({ row }) => {
+        return deptMap[row.dept];
+      },
+    },
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    width: 160,
+    title: '操作',
+    align: 'center',
+    slots: { default: 'action' },
+    fixed: 'right',
+  },
+];
+
+export const searchFormSchema: VxeFormItemProps[] = [
+  {
+    field: 'account',
+    title: '用户名',
+    itemRender: {
+      name: 'AInput',
+    },
+    span: 6,
+  },
+  {
+    field: 'nickname',
+    title: '昵称',
+    itemRender: {
+      name: 'AInput',
+    },
+    span: 6,
+  },
+  {
+    span: 12,
+    align: 'right',
+    className: '!pr-0',
+    itemRender: {
+      name: 'AButtonGroup',
+      children: [
+        {
+          props: { type: 'primary', content: '查询', htmlType: 'submit' },
+          attrs: { class: 'mr-2' },
+        },
+        { props: { type: 'default', htmlType: 'reset', content: '重置' } },
+      ],
+    },
+  },
+];