## 自定义字段 当我们的字段不能够满足需求，或者需要对现有字段进行调整，可以使用本字段 ***** ## 1.需求例子1：我们需要拓展数组字段，如下效果  里面包含了图片选择，文本框，单选框和下拉框基本满足了一般需求 ***** ## 2.在`application\admin\view\custom`新建custom.html文件 ### 表格布局 代码如下：可以自行调整自己所需组件 ``` <style type="text/css"> .upload-image{ background-color: #eee; background-repeat: no-repeat; background-position: center; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M1 8h14M8 1v14" stroke="black" stroke-width="1.5" stroke-linecap="round"/></svg>'); font-size: 0; color: transparent; height: 38px; width: 38px; border: 1px dashed #d9d9d9; display:inline-block; box-sizing:border-box; position: relative; cursor: pointer; line-height:38px; vertical-align: middle;} </style> <script type="text/html" id="{$vo.name}Tpl"> <tr class="layui-form-item rules-item"> <td> <img data-image src="{{d.row.thumb || '/assets/img/noimage.jpg'}}" data-original="{{d.row.thumb || '/assets/img/noimage.jpg'}}" alt="" width="38" height="38" style="vertical-align: bottom;"> <input type="hidden" class="tabbar-img-value" name="{{d.name}}[{{d.index}}][thumb]" id="c-{{d.data.id}}-{{d.index}}-thumb" value="{{d.row.thumb|| ''}}"> <button type="button" id="faupload-image" class="faupload upload-image" data-input-id="c-{{d.data.id}}-{{d.index}}-thumb" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false"></button> </td> <td> <img data-image src="{{d.row.image || '/assets/img/noimage.jpg'}}" data-original="{{d.row.image || '/assets/img/noimage.jpg'}}" alt="" width="38" height="38" style="vertical-align: bottom;"> <input type="hidden" class="tabbar-img-value" name="{{d.name}}[{{d.index}}][image]" id="c-{{d.data.id}}-{{d.index}}-image" value="{{d.row.image|| ''}}"> <div class="upload-image fachoose" data-multiple="false" data-mimetype="image/*" data-input-id="c-{{d.data.id}}-{{d.index}}-image" id="fachoose-c-{{d.data.id}}-{{d.index}}-image"></div> </td> <td> <input type="text" class="tabbar-img-value layui-input" name="{{d.name}}[{{d.index}}][file]" id="c-{{d.data.id}}-{{d.index}}-file" value="{{d.row.file|| ''}}" style="vertical-align: bottom;display:inline-block;width: 155px;"> <div class="upload-image fachoose" data-multiple="false" data-input-id="c-{{d.data.id}}-{{d.index}}-file" id="fachoose-c-{{d.data.id}}-{{d.index}}-file"></div> </td> <td><input type="text" class="layui-input" name="{{d.name}}[{{d.index}}][name]" placeholder="姓名" value="{{d.row.name|| ''}}" /></td> <td><input type="text" class="layui-input" name="{{d.name}}[{{d.index}}][age]" placeholder="年龄" value="{{d.row.age|| ''}}" /></td> <td><input type="text" class="layui-input" name="{{d.name}}[{{d.index}}][score]" placeholder="成绩" value="{{d.row.score|| ''}}" /></td> <td><select name="{{d.name}}[{{d.index}}][city]" lay-filter="fieldlist"> <option value=""></option> <option value="1" {{# if(d.row.city == 1){ }}selected{{# } }}>江苏</option> <option value="2" {{# if(d.row.city == 2){ }}selected{{# } }}>上海</option> <option value="3" {{# if(d.row.city == 3){ }}selected{{# } }}>深圳</option> <option value="4" {{# if(d.row.city == 4){ }}selected{{# } }}>香港</option> </select></td> <td><input type="radio" class="layui-input" name="{{d.name}}[{{d.index}}][sex]" value="1" {{# if(d.row.sex == 1){ }}checked{{# } }} title="男" lay-filter="fieldlist"/> <input type="radio" class="layui-input" name="{{d.name}}[{{d.index}}][sex]" value="2" {{# if(d.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> <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="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/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.plupload(obj); Form.events.faselect(obj); //需要渲染更多组件可以在这里加 }); } }; return Controller; }); } </script> ``` ***** ## 3.然后新建字段  ***** 这样就OK了，你可以完善更多的高级自定义字段 ps:需要注意的是，自定义没有经过处理，像上面的例子的字段要展现在前端需要json_decode处理下