## 自定义字段 当我们的字段不能够满足需求，或者需要对现有字段进行调整，可以使用本字段 ## 1.需求例子1：我们需要拓展数组字段，如下效果  里面包含了图片选择，文本框，单选框和下拉框基本满足了一般需求 ## 2.在`application\admin\view\custom`新建custom.html文件 ### 表格布局 代码如下：可以自行调整自己所需组件 ``` <style type="text/css"> .custom-fachoose-image{vertical-align: middle;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{vertical-align: middle;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-input-block"> <table class="layui-form-field-label layui-table fieldlist" data-name="{$vo.fieldArr}[{$vo.name}]" data-id="{$vo.name}" data-template="{$vo.name}Tpl" 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> <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 || '/assets/img/noimage.jpg'}}" data-original="{{item.row.image || '/assets/img/noimage.jpg'}}" 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-line"></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-input-id="c-{{item.data.id}}-{{item.index}}-file" id="fachoose-c-{{item.data.id}}-{{item.index}}-file"><i class="iconfont icon-add-line"></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-fill"></i></button> <button type="button" class="layui-btn btn-dragsort layui-btn-xs"><i class="iconfont icon-drag-move-2-fill"></i></button></td> {{# }); }} </tr> </script> <script type="text/javascript"> require.callback = function () { define('backend/general/config', ['backend', 'form'], function (Backend, Form) { var Controller = { setting: function () { //复制开始 Form.api.bindevent($("form.layui-form")); $(document).on("change", ".fieldlist .tabbar-img-value", function (e, obj) { $(this).prev('img').attr("src",$(this).val()); }); //点击追加渲染组件 $(document).on("fa.event.appendfieldlist", ".btn-append", function (e, obj) { Form.events.faselect(obj); //需要渲染更多组件可以在这里加 }); } }; return Controller; }); } </script> ``` ## 3.然后新建字段  ***** 这样就OK了，你可以完善更多的高级自定义字段 ps:需要注意的是，自定义没有经过处理，像上面的例子的字段要展现在前端需要json_decode处理下