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

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

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

``` 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/v/1.2.4/index.html#/component/options" 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)

发布帖子

作者信息

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

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

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

作者信息

最近热帖