VEITOOL 框架开发文档(TP版)官方文档官网

字典渲染

::: center  
!16 本项内容均为 !!#ff0000 v2.0.1!! 版本新增功能属性!
:::
## 数据结构
该功能主要是针对于快速实现下拉选项，以及方便选项数据的调用渲染和统一管理而增加。字典数据结构为多维数组，每个字典编码键对应一组字典数据，其结构为：

``` js
"DICT_KEY": [ //DICT_KEY 字典编码
{
	"id": 1,
	"name": "字典项名",
	"value": "字典项值",
	"pid": "上级ID",
	"pids": "所有上级ID串，逗号隔开。无则留空"
},
{
	"id": 2,
	"name": "字典项名2",
	"value": "字典项值2",
	"pid": "上级ID",
	"pids": "所有上级ID串，逗号隔开。无则留空"
},
...
]
```
其中必须有的两个字段：`name`、`value`，当为树形结构时，必须有字段：`pid`。
## 子页中下拉项渲染
字典数据在第一次访问框架主页时，和主菜单、用户数据一并加载缓存于本地页面中。
在异步请求得到的子模板页中系统会对含有属性 `v-dict="KEY"` 的标签自动调用 `admin.vDict()` 方法进行渲染，并且在子页的 `layui.use()` 逻辑中可通过方法：`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
<div class="layui-card-header">
    <form class="layui-form render" lay-filter="project168_search_form">
        <div class="layui-form-item">

<div class="layui-inline" style="width:120px;"><select name="pay_type" v-dict="{ali:'支付宝',wechat:'微信'}" initValue="ali"><option value="">支付方式</option></select></div>
			
			<div class="layui-inline" style="width:120px;"><select name="pay_type" v-dict="[{'value':'ali','name':'支付宝'},{'value':'wechat','name':'微信'}]" prop="{name:'value',value:'value'}" initValue="wechat"><option value="">支付方式</option></select></div>
            
            <div class="layui-inline" style="width:120px;"><select name="select02" v-dict="[{'value':'ali','name':'支付宝'},{'value':'wechat','name':'微信'}]"><option value="">请选择2</option></select></div>
            
            <div class="layui-inline" style="width:120px;"><select name="select03" v-dict="/admin/index/index?do=json2"><option value="">请选择3</option></select></div>
            
			
            <div class="layui-inline" style="width:120px;"><select name="select04" v-dict="ORGAN"><option value="">组织4</option></select></div>

<div class="layui-inline" style="width:120px;"><div class="v-xmselect-tree" v-dict="{ali:'支付宝1',wechat:'微信1'}" options="{name:'organ',tips:'选择1'}"></div></div>
            
            <div class="layui-inline" style="width:120px;"><div class="v-xmselect-tree" v-dict="[{'value':'ali','name':'支付宝2'},{'value':'wechat','name':'微信2'}]" options="{name:'organ',tips:'选择2'}"></div></div>
            
            <div class="layui-inline" style="width:120px;"><div class="v-xmselect-tree" v-dict="/admin/index/index?do=json2" options="{name:'organ',tips:'选择3'}"></div></div>
            
            <div class="layui-inline" style="width:120px;"><div class="v-xmselect-tree" v-dict="ORGAN" options="{name:'organ',tips:'组织4'}"></div></div>

<div class="layui-inline">
                <div class="layui-btn-group">
                    <button class="layui-btn" lay-submit lay-filter="search-project168"><i class="layui-icon layui-icon-search"></i>搜索</button>
                    <a class="layui-btn" lay-submit lay-filter="search-project168-all"><i class="layui-icon layui-icon-light"></i>全部</a>
                </div>
            </div>
        </div>
    </form>
</div>
```

## 弹窗中下拉项渲染
弹窗中如果调用了字典，需要在弹窗业务完成后再单独执行一下字典渲染方法即可：
``` js
admin.open({
	type: 1,
	bid: 'test_items',
	btn: ['保存', '取消'],
	area: ['600px','600px'],
	title: '页面',
	shadeClose: false,
	success: function(lay,index){
		layui.buildItems.build({
                    gid: gid,
                    bid: 'project168_items',
                    map: map_root + 'system.upload/',
                    data: [
                        {name:"id",type:"hidden"},
                        {name:"title",type:"text",title:"名称",value:"",verify:"required",must:true,placeholder:"请输入名称",affix:"clear"},
                        {name:"organ",type:"html",title:"组织",html:'<div v-dict="ORGAN" options="{name:\'organ\',layVerify:\'required\',layReqText:\'请选择组织\',radio:false,clickClose:false,model:{},initValue:[\''+(Dt ? Dt.organ.replace(/,/g, "','") : '')+'\']}"></div>',must:true},
						//v2.2.0开始支持 url 动态获取数据渲染 其中属性 initValue="初始选定值" 为 v2.3.3 新增
                        {name:"organ",type:"html",title:"组织",html:'<select name="select01" initValue="11" v-dict="/admin/index/index?do=json2"><option value="">请选择1</option></select>'},
                        {name:"organ",type:"html",title:"组织",html:'<select name="select02" initValue="12" v-dict="ABCD"><option value="">请选择2</option></select>'},
                    ]
                });
                //admin.vDict(lay) //这里在弹窗构建完成后对其执行字典数据渲染
                admin.vDict(lay,{"ABCD":"/admin/index/index?do=json2"}); //v2.2.0开始支持 url动态获取数据渲染
                //admin.vDict(lay,{"ABCD":{ali:'支付宝3',wechat:'微信4'}); //指定对象数据进行渲染
                //admin.vDict(lay,{"ABCD":[{'value':'ali','name':'支付宝2'},{'value':'wechat','name':'微信2'}]); //指定数组对象进行渲染
		form.val('test_items_form',{pay:'ali'}); //这里的赋值须放在渲染的后面
	}
});
```