Veitool 2.0.1 版新增数据字典相关功能使用

发布：2023-12-06 10:35分类：使用分享评论：17浏览：1986置顶

## 数据结构
字典数据结构为多维数组，每个字典编码键对应一组字典数据，其结构为：

``` js
"KEY_TYPE": [
{
	"id": 1,
	"name": "字典项名",
	"value": "字典项值",
	"pid": "上级ID",
	"pids": "所有上级ID串，逗号隔开。无则留空"
},
{
	"id": 2,
	"name": "字典项名2",
	"value": "字典项值2",
	"pid": "上级ID",
	"pids": "所有上级ID串，逗号隔开。无则留空"
},
...
]
```
## 调用渲染
字典数据在第一次访问框架主页时，和主菜单、用户数据一并加载缓存于本地页面中，在模板页的JS逻辑中可通过方法：`admin.getDict('字典编码')` 随时获取对应的字典数据。在模板中的调用渲染模式有两种：
1. SELECT标签形式 `<select v-dict="字典编码/数据集" name="veitool"><option value="">请选择</option></select>`
2. DIV 标签形式 `<div v-dict="字典编码/数据集" class="v-xmselect-tree" id="ID" options="{name:'www'}"></div>` 其中`options` 属性请参照第三方扩展：<a href="https://xm-select.com/file/xm-select/v1.2.4" target="_blank">xm-Select</a> 该扩展可以轻松实现下拉树，以及单选、多选等功能

``` html
// SELECT标签形式
<select v-dict="PAY_TYPE" name="veitool2"><option value="">请选择</option></select>

// DIV 标签形式 必须设置带有 id 属性
<div class="v-xmselect-tree" id="id_name" v-dict="DICT_KEY" options="{name:'land',filterable:true,searchTips:'搜索词'}"></div>

// 数据集模式1初始数据 这类形式不能用于【DIV 标签形式】渲染
<div class="layui-inline" style="width:120px;">
	<select v-dict="{key1:'val1',key2:'val2'}" name="veitool"><option value="">请选择</option></select>
</div>

// 数据集模式2初始数据
<div class="layui-inline" style="width:120px;">
	<select v-dict="[{name:'val1',value:'id1'},{name:'val2',value:'id2'}]" name="veitool3"><option value="">请选择</option></select>
</div>
```

## 弹窗渲染
弹窗中如果调用了字典，需要在弹窗业务完成后再单独执行一下字典渲染方法即可：
``` js
admin.open({
	type: 1,
	bid: 'test_items',
	btn: ['保存', '取消'],
	area: ['600px','600px'],
	title: '页面',
	shadeClose: false,
	success: function(lay,index){
		buildItems.build({
			bid: 'test_items',
			data: [
				{name:"pay",title:"支付方式",type:"html",html:'<select v-dict="PAY_TYPE"></select>'},
			]
		});
		admin.vDict(lay); //这里单独执行字典数据渲染
		form.val('test_items_form',{pay:'ali'}); //这里的赋值须放在渲染的后面
	}
});
```

数据字典

116333081 楼
2024-07-07 03:14

@wjcms:
完美
很实用！

0 回复 (0)
116333082 楼
2024-07-07 03:14

很实用！

0 回复 (0)
116333083 楼
2024-07-07 03:15

很实用！很实用！

0 回复 (0)
116333084 楼
2024-07-07 03:15

很实用！

0 回复 (0)
wsldgl5 楼
2024-08-27 17:24

和后台功能中的字典有什么区别

0 回复 (0)
veitool6 楼
2025-05-28 22:48

加载页自定义下拉框字典渲染（如：搜索栏） HTML ```html <div class="layui-inline" style="width:120px;" id="search_top_cust"> //注意这里渲染字典标签是 v-dicts(不是v-dict)，所以加载时admin.js扩展不会对其进行字典渲染 //是由下方的JS手动调用渲染时才渲染，这类方式是用于不存在的字典数据而采用的临时字典数据渲染 //这里的字典标识 CUST_NAME 一般是不存在于字典数据中，prop属性用来指定：键、值所在数据中的键名 <select v-dicts="CUST_NAME" name="cust" prop="{name:'title',value:'id'}"> <option value="">客户</option> </select> </div> //xmSelect 形式 <div class="layui-inline" style="width:120px;"> <div class="v-xmselect-tree" v-dict="CUST_NAME" options="{name:'cust',tips:'客户',prop:{name:'name',value:'name'}}"> </div> </div> ``` JS ```js //对字典数据进行键值对重构 var CUST = admin.getDict('DICT_CUST').map( item => ({id:item.id, name:item.name, value:item.name}) ); //手动渲染指定字典数据 admin.vDict($('#search_top_cust'),{CUST_NAME:CUST},'v-dicts'); ```

0 回复 (0)
vibut7 楼
2026-03-30 09:28

很实用~~

0 回复 (0)

发布帖子

作者信息

: veitool; 等级：Lv3; 积分：16981; 真我而为 ~

Veitool 2.0.1 版新增数据字典相关功能使用

发布：2023-12-06 10:35分类：使用分享评论：17浏览：1986置顶

作者信息

最近热帖