#### 自定義字段 當我們的字段不能夠滿足需求，或者需要對現有字段進行調整，可以使用本字段 ## 1.需求例子1：我們需要拓展數組字段，如下效果  里面包含了圖片選擇，文本框，單選框和下拉框基本滿足了一般需求 ## 2.在`application\admin\view\custom`新建custom.html文件 ### 表格布局 代碼如下：可以自行調整自己所需組件 ``` <style type="text/css"> .custom-fachoose-image{border:1px dashed #d9d9d9;width:38px;height:38px;line-height:38px;border-radius:2px;background-color:#fbfbfb;text-align:center;cursor:pointer;display:inline-block;box-sizing:border-box;} .custom-fachoose-file{border:1px dashed #d9d9d9;width:38px;height:38px;line-height:38px;border-radius:2px;background-color:#fbfbfb;text-align:center;cursor:pointer;display:inline-block;box-sizing:border-box;} </style> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">{$vo.title} {if condition="isset($vo.ifrequire) AND $vo.ifrequire"}&nbsp;<font color="red">*</font>{/if}</label> <div class="layui-input-block"> <table class="layui-form-field-label layui-table fieldlist" data-name="{$vo.fieldArr}[{$vo.name}]" data-id="{$vo.name}" data-template="true" data-tag="tr"> <tr> <td width="80">圖片</td> <td width="200">附件</td> <td>姓名</td> <td>年齡</td> <td>成績</td> <td>城市</td> <td width="140">性別</td> <td width="70"></td> </tr> <tr><td colspan="10"><button type="button" class="layui-btn btn-append">追加</button></td></tr> </table> <textarea name="{$vo.fieldArr}[{$vo.name}]" class="layui-textarea layui-hide">{$vo.value}</textarea> </div> {if $vo.remark}<div class="layui-form-mid2 layui-word-aux">{$vo.remark|raw}</div>{/if} </div> <script type="text/html" id="{$vo.name}Tpl"> <tr class="layui-form-item rules-item"> {{# layui.each(d.lists, function(index, item) { }} <td> <img data-image src="{{item.row.image || '/static/admin/img/none.png'}}" data-original="{{item.row.image || '/static/admin/img/none.png'}}" alt="" width="38" height="38" style="vertical-align: bottom;"> <input type="hidden" class="tabbar-img-value" name="{{item.name}}[{{item.index}}][image]" id="c-{{item.data.id}}-{{item.index}}-image" value="{{item.row.image|| ''}}"> <div class="custom-fachoose-image fachoose" data-multiple="false" data-mimetype="image" data-input-id="c-{{item.data.id}}-{{item.index}}-image" id="fachoose-c-{{item.data.id}}-{{item.index}}-image"><i class="iconfont icon-add"></i></div> </td> <td> <input type="text" class="tabbar-img-value layui-input" name="{{item.name}}[{{item.index}}][file]" id="c-{{item.data.id}}-{{item.index}}-file" value="{{item.row.file|| ''}}" style="vertical-align: bottom;display:inline-block;width: 155px;"> <div class="custom-fachoose-file fachoose" data-multiple="false" data-mimetype="file" data-input-id="c-{{item.data.id}}-{{item.index}}-file" id="fachoose-c-{{item.data.id}}-{{item.index}}-file"><i class="iconfont icon-add"></i></div> </td> <td><input type="text" class="layui-input" name="{{item.name}}[{{item.index}}][name]" placeholder="姓名" value="{{item.row.name|| ''}}" /></td> <td><input type="text" class="layui-input" name="{{item.name}}[{{item.index}}][age]" placeholder="年齡" value="{{item.row.age|| ''}}" /></td> <td><input type="text" class="layui-input" name="{{item.name}}[{{item.index}}][score]" placeholder="成績" value="{{item.row.score|| ''}}" /></td> <td><select name="{{item.name}}[{{item.index}}][city]" lay-filter="fieldlist"> <option value=""></option> <option value="1" {{# if(item.row.city == 1){ }}selected{{# } }}>江蘇</option> <option value="2" {{# if(item.row.city == 2){ }}selected{{# } }}>上海</option> <option value="3" {{# if(item.row.city == 3){ }}selected{{# } }}>深圳</option> <option value="4" {{# if(item.row.city == 4){ }}selected{{# } }}>香港</option> </select></td> <td><input type="radio" class="layui-input" name="{{item.name}}[{{item.index}}][sex]" value="1" {{# if(item.row.sex == 1){ }}checked{{# } }} title="男" lay-filter="fieldlist"/> <input type="radio" class="layui-input" name="{{item.name}}[{{item.index}}][sex]" value="2" {{# if(item.row.sex == 2){ }}checked{{# } }} title="女" lay-filter="fieldlist"/></td> <td><button type="button" class="layui-btn layui-btn-danger btn-remove layui-btn-xs"><i class="iconfont icon-close"></i></button> <button type="button" class="layui-btn btn-dragsort layui-btn-xs"><i class="iconfont icon-yidong"></i></button></td> {{# }); }} </tr> </script> <script type="text/javascript"> $(document).on("change", ".fieldlist .tabbar-img-value", function (e, obj) { $(this).prev('img').attr("src",$(this).val()); }); //YznCMS1.2.2+版本需添加 $(document).on("fa.event.appendfieldlist", ".btn-append", function (e, obj) { layui.use('yznForm', function() { var yznForm = layui.yznForm; yznForm.events.faselect(obj); }); }); </script> ``` ## 3.然后新建字段  這樣就OK了，你可以完善更多的高級自定義字段 ps:需要注意的是，自定義沒有經過處理，像上面的例子的字段要展現在前端需要json_decode處理下