vBen admin使用记录

2,457 阅读1分钟

开发中点的记录

1. 弹框组件:

  • BasicModal(看具体实现方式)
    
  • 使用时,可以灵活配置 是否显示headerfooter
  • 注意配合使用useModel.ts
    

image.png

2. 基础表单 BasicForm (查询模块和基础详情表单可用)

注意:当源码里没有特殊配置时,参考ant...vue 的配置 配置

  • 根据schemas值 动态显示表单内容
  • submit方法获取表单值
  • :actionColOptions="{ span: 24 }"不设置时,输入框和按钮依次根据设置的grid值排版;设置后输入框默认沾满整行,按钮换行

image.png

image.png

  • 表单中的button文本传值方式
  • submitButtonOptions = {text: "提交"}
  • resetButtonOptions = {text: '清空'}
  • showResetButton: (true),
  • showSubmitButton: (true),
  • showDownLoadButton: (false),
  • showAdvancedButton: (true),
  • downLoadFile = true//导出按钮 自定义新增

image.png form组件 select基础用法

image.png

3.图表的使用

  1. 在弹框上使用图表时,需要注意页面加载顺序,init必须在页面挂载完成后
  2. 在ref<HTMLDivElement | null>(null)获取对象时,对象声明不要放在reatcive里,会有vlaue命名重复问题;

image.png

4.BasicTable的使用

注意点
  1. 远程请求数据时,数据格式要求如下图:

image.png

  1. 如果项目table请求格式发生改变,请在以下文件配置

image.png

image.png

3.新增showDownLoadButton配置(列表上导出操作);示例代码如下 downLoad-file=导出回调方法;

image.png

image.png

在basicTable里配置form插槽时,需要加上#form-*****;用法如下

image.png

image.png useDebounceFn(onSearch, 300)防抖

image.png

5.动态路由配置

1650526287(1).jpg

1650526361(1).jpg