当前位置：首页 > news >正文

【el-admin】el-admin关联数据字典

news 来源：原创 2025/5/10 14:03:31

数据字典使用

一、新增数据字典
- 1、新增【图书状态】和【图书类型】数据字典
- 2、编辑字典值
二、代码生成配置
- 1、表单设置
- 2、关联字典
- 3、验证关联数据字典
三、查询操作
- 1、模糊查询
- 2、按类别查询（下拉框）
四、数据校验

一、新增数据字典

1、新增【图书状态】和【图书类型】数据字典

在这里插入图片描述

2、编辑字典值

在这里插入图片描述

二、代码生成配置

1、表单设置

在这里插入图片描述
表单对应新增功能

2、关联字典

在这里插入图片描述
保存并生成，如果你是新使用这个框架，可以选下面的覆盖提交，因为本来也没有什么功能

3、验证关联数据字典

新增数据看分类代码和状态代码是否关联数据字典
在这里插入图片描述

三、查询操作

1、模糊查询

还是在代码生辰里面配置
在这里插入图片描述

2、按类别查询（下拉框）

这个需要修改一下book/index.vue文件
在这里插入图片描述
代码生成器生成的是文本框，我们需要改成下拉框

<el-select v-model="query.categoryCode" filterable placeholder="请选择" class="filter-item" @keyup.enter.native="crud.toQuery" ><el-optionv-for="item in dict.book_type":key="item.id":label="item.label":value="item.value" />
</el-select>

这个下拉框的样式可以在下面表单组件里面找到
在这里插入图片描述
修改完之后的样式

在这里插入图片描述

四、数据校验

以图书ISBN号为例，我的数据都是13位纯数字
这个部分可以仿照system/user模块的手机号校验制作
在这里插入图片描述

所有验证方法都在这个js里面

我们可以复制其中一个方法让AI帮我们仿写一个校验ISBN号的方法


/* 是否ISBN-13号码（13位纯数字）*/
export function validateISBN(rule, value, callback) {const reg = /^\d{13}$/// 精确匹配13位数字if (value === '' || value === undefined || value === null) {callback()// 空值处理，根据需要调整} else {if (!reg.test(value)) {callback(new Error('请输入正确的ISBN-13号码（13位纯数字）'))} else {callback() // 验证通过}}
}