# 效果展示

# 配置文件

示例配置文件:

export const options = {};

export default (methods) => ({
  form: {
    // 表单验证规则
    rules: {
      title: [{ trigger: "blur" }],
      content: [{ trigger: "blur" }]
    }
    // 。。。其他配置省略,后续文档会详细介绍
  },
  // 表格配置(也是表单、搜索栏的配置)
  items: [
    { hideSearch: true, hideForm: true, field: { prop: "id", label: "ID" } },
    { field: { prop: "title", label: "问题", minWidth: 120 } },
    {
      hideSearch: true,
      field: { prop: "content", label: "回复", minWidth: 180 },
      props: { type: "textarea" }
    },
    {
      type: "el-date-picker",
      hideSearch: true,
      hideForm: true,
      field: {
        prop: "created_at",
        label: "创建时间",
        minWidth: 180
      }
    }
  ],
  // 菜单配置
  menu: ["add"],
  // 操作配置
  operate: ["edit", "del"]
});

# 界面效果

# 搜索栏、表格、分页

示例图片

# 新增窗口

示例图片

# 编辑窗口

示例图片

# 删除提示

示例图片

# 高效开发,无需重复造轮子

无需手动编写多个表单、组件或弹窗,甚至 API 请求都已预设,数据更新自动处理。

更重要的是,支持灵活的配置,可以根据业务需求轻松调整,快速适配各种场景。

除了示例中展示的小部分功能,DJ-Admin 还提供了丰富的便捷配置和预设,例如:

自动校验表单:正常提交时,如未填写字段,系统会提示错误。 而 CRUD 组件已内置智能匹配机制,如 label: '标题',则自动生成友好的校验提示 请输入标题,无需手动配置。

# 普通表单

示例图片

# CRUD 组件

示例图片

后续文档中:Config 选项 会进一步介绍配置的设置。常用示例 会收集常用的使用配置案例。