一周开发总结——Vben

晴天蜗牛不一般
6,902 阅读3分钟
  • 关于项目：一个后台管理系统，领导强推Vben-Admin模板拿来改造，负责其中业务模块的开发。这个项目是我的Vben初体验，封装的确实到位，尤其form表单和tabel表格对于api的使用，一个字强！整套模板涵盖后台系统需要的模块组件，优点不再赘述，接下来主要吐槽和记录一下自己踩过的坑。。。
  • 关于Vben-Admin：
  1. Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
  2. <这条应该加粗>：Vben官方文档相当简洁，仅仅依赖文档使用Vben远远不够，正确的打开方式是开三个窗口，第一个打开Vben-Admin网站，用来寻找对应功能模块然后根据url找到项目中对应的demo路径，阅读并拿来使用或改造；第二个打开Vben官方文档，用来熟悉Vben封装好的组件参数和配置，满足二次开发需要，很多基于ant-design的ui组件参数或方法直接使用是没有效果的；第三个打开Ant-Design官方文档，Vben官方文档没有而antd有的那就使用antd的，有一些场景使用Vben封装的组件反而会复杂一些
  • 记录一下
  1. 弹框内嵌Form表单，下拉框点击获取远程数据
{
  field: 'organCode', 
  label: '所属机构',
  component: 'ApiSelect',
  componentProps: {
    api: getOrgan, // 下拉框获取远程数据直接调接口
    params: {
      page: 1,
      size: 10000,
    }, // 参数配置
    resultField: 'content',
    labelField: 'name',
    valueField: 'code',
    immediate: false,
    getPopupContainer: () => document.body, // 下拉框弹出层定位会跑偏 model高度不够的话会被遮挡，这时需要
  },
  colProps: { xl: 20 },
  rules: [{ required: true, message: '请选择所属机构', trigger: 'blur' // 默认trigger为change，不单独设置如果
  默认值为空会出现未输入就提示的情况 }],
  //可以直接设置 required：true，不用rules，这种情况会默认提示‘请选择+label’，不够灵活，建议用rules配置
},
  1. 点击弹框回显；进行弹框内操作
const [registerForm, { setFieldsValue }] = useForm({
//表单配置  setFieldsValue - 设置表单值
})

const [registerModal, { closeModal }] = useModalInner((data) => {
//弹框内操作
  setFieldsValue({ 
      organCode: data.organCode,
  });
})

3.文件流下载

一般后端会将文件信息存到响应头中，response > headers, Vben全局响应拦截处理中成功时直接return 了res.data,导致文件
信息（比如导出文件名）没有输出，此时可以选择针对下载单独拦截或使用原生axios发起请求

4.既要表单的label又要value，这种需求一直有，很烦

专程去社区艾特了大佬，他告诉我去看antdeisgn（还是老方法，change事件绑俩值）

5.选择一个时段非日期，没有类似日期的组件

用两个TimePicker拼接，设置同样的rules，开始时间大于结束时间，要有+1提示》外层包裹div，固定宽高进行定位，自身不带这个设置，只有suffix设置后缀，样式不符

写的有点晚，开发中涉及的主要是Vben中的Form和Table，很多点忘了记录。。。后续再补充

avatar
文章
阅读
粉丝