🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
完整案例 ~~~ public function add( $info=array() ) { $info = [ 'name' => '名称', 'type' => 3, 'uid' => 2, 'extra' => '描述' ]; $test_data = array( ['key1'=>1,'key2'=>'张三'], ['key1'=>2,'key2'=>'李四'], ['key1'=>3,'key2'=>'王武'], ); return TBuilder('form',$this) ->addTabGroup('基本信息') ->setFormAction( url('action') ) ->addWidgets([ ['name|val','配置标识|用于C/config函数调用,只能使用英文且不能重复'], ['name|text','配置标识|用于C/config函数调用,只能使用英文且不能重复',[ 'validate'=>['required','minlength'=>'2'] ]], ['icon|text|.input_icon_select,.class2,#id1,attr:attr_val,attr2:attr_val2','图标选择|选择图标样式'], ['icon_class|text', '图标类名', ['icon'=>'fa fa-angle-right'] ], //['is_show_difficulty|switch','是否显示难度'], //['project_difficulty|select','难度',['listdata'=>config('project_difficulty'),'key_relevance'=>'id|name','open_by'=>'is_show_difficulty']], ['type|select','配置类型|系统会根据不同类型解析配置值',[config('CONFIG_TYPE_LIST')]], ['uid|select','客服',[$test_data,'key1|key2']], ['username|text','客服名称',['tip'=>'客服名称用于显示']], ['extra|textarea','配置项|如果是枚举型 需要配置该项'], ['head_pic_id|cropper','头像',['pic_wh'=>'400*400'] ], ['head_pic_id2|images','头像2'], ['id|hidden'], ['birthday|date', '天'], ['birthday1|datetime', '时'], ['birthday2|dateyear', '年'], ['birthday3|datemonth', '月'], ['tags|tags', '标签',], ]) ->addTabGroup('扩展信息') ->addWidgets([ ['sort|number','排序|用于分组显示的顺序', ['tip'=>'测试:用于分组显示的顺序'] ], ['type2|checkbox','多选|多选测试',[config('CONFIG_TYPE_LIST')]], ['type3|radio','单选|单选测试',[config('yes_no')]], ['is_open|switch','配置类型|系统会根据不同类型解析配置值'], ['content|kindeditor', '内容'], ]) ->setWidgetsValues( $info ) ->fetch(); } ~~~ ![](https://box.kancloud.cn/c7c3bb2e7807bf57fd0813688165215b_1664x798.png) ![](https://box.kancloud.cn/ea9dd23160c08643f4826c168c239f8e_1648x774.png) 修改布局:layout_panel ~~~ ->layoutView('layout_panel') ~~~ ![](https://box.kancloud.cn/2cec08e105f8a0ea37ed9eedd61aae72_1700x856.png) ![](https://box.kancloud.cn/b62bcc1ba213b6f8014e3be3511d8cd1_1683x862.png) ![](https://box.kancloud.cn/7ae187e3a6e108e396a08d1b18cdbd43_1694x891.png) 修改布局:layout_full ~~~ return TBuilder('form',$this) ->addTabGroup('基本信息') ->setFormAction( url('action') ) ->addWidgets([ ['name|val','配置标识|用于C/config函数调用,只能使用英文且不能重复'], ['name|text','配置标识|用于C/config函数调用,只能使用英文且不能重复',[ 'validate'=>['required','minlength'=>'2'] ]], ]) ->addTabGroup('扩展信息') ->addWidgets([ ['sort|number','排序|用于分组显示的顺序', ['tip'=>'测试:用于分组显示的顺序'] ], ['type2|checkbox','多选|多选测试',[config('CONFIG_TYPE_LIST')]], ]) ->setWidgetsValues( $info ) ->layoutView('layout_full') ->fetch(); ~~~ ![](https://box.kancloud.cn/86caa1187e7aa3de8dc55ce624c7499a_1671x516.png) 附加Tab后置内容:appendTabHtml ~~~ $html = <<<str <div class="pull-right mr50 mt50"> <span class="mr20">合计: <span class="warn-price">168.00</span>元</span> <button class="btn btn-primary">去支付</button> </div> str; return TBuilder('form',$this) ->addTabGroup('资源包购买') ->setFormAction( url('action') ) ->addWidgets([ ['name|number','资源包数量'], ]) ->layoutView('layout_panel') ->appendTabHtml($html) ->hideFormButton() ->fetch(); ~~~ ![](https://box.kancloud.cn/e4906645f2266b4eababd9b478cae345_1036x243.png) > **说明:** > addTabGroup用于创建tab分组,其后addWidgets创建tab页内的组件。两者组合使用依次调用。 > 当页面操作为编辑时setWidgetsValues传入编辑数据值数组