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

一、新增数据字典

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() // 验证通过}}
}

写好校验方法之后回到system/book/index.vue
1）import校验方法

2）修改rules，新增一条规则

此时刷新前端，ISBN号校验生效

通过这个实例，可以再对图书价格，图书库存进行校验（输入非负）