## 数据结构

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

​

``` 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'}); //这里的赋值须放在渲染的后面

    }

});

```