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

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

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

``` 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://maplemei.gitee.io/xm-select/#/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'}); //这里的赋值须放在渲染的后面
	}
});
```

数据字典

xiaohei1 楼
2024-04-05 15:36

官方出个会员模型开发，视频模型开发，商城模型开发的教程吧，现在的教程和插件太少了

0 回复 (0)
xiaohei2 楼
2024-04-05 13:02

啥时候上一个商城模型参考下

0 回复 (0)
7345851873 楼
2024-03-29 15:00

很实用！

0 回复 (0)
root4 楼
2024-03-29 11:13

功能不错

0 回复 (0)
wjcms5 楼
2023-12-10 10:12

完美

0 回复 (0)
dg_ly6 楼
2023-12-07 07:37

数据字典是不错的功能，谢谢分享！

0 回复 (0)
cnfox02737 楼
2023-12-06 22:54

very cool

1 回复 (0)

发布帖子

作者信息

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

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

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

作者信息

最近热帖