单选下拉组件

概述

选择下拉组件是日常项目研发中心经常使用到的功能，比如商品分类、支付类型、订单状态等等，传统的项目研发中，我们都是后台获取数据源传输给UI前台然后解析渲染，也有的是直接写入界面，显得不够灵活，比如我们想选择商品分类(这里假如只有一级)，我们会先查询数据然后绑定或者Vue前后端分离中调用API接口获取数据后渲染，如传统的开发模式不容，为了数据的灵活性、兼容性、可扩展性，我们这里自定义研发了选择下拉动态组件，想获取某个数据源，我们可以指定传入值，也可以动态获取某个数据表的值或者直接传入配置参数作为数据源来传入，简化了代码的同时又给程序增添了优化，提高了项目的可读性、高效性、可维护性，下面我们详细的介绍组件的形式与调用方式；

指定数据源

• 组件：{:widget('common/select',array('gender|1|性别|name|id',config('config.gender_list'),isset($info['gender']) ? $info['gender'] : 1))}

• 参数name：gender|1|性别|name|id

`gender`：组件名称，此字段对应数据表中的字段名称`gender`;
`1`：这里的参数有`0和1`的区分，0表示不必填，1表示必填；
`性别`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择性别`
`name`：这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值(此处用不到)；
`id`：这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值(此处用不到)；

• 参数data：config('config.gender_list') data：下拉选择组件数据源，$genderList为后台绑定到界面UI的参数；

• 参数value：isset($info['gender']) ? $info['gender'] : 1 value：绑定到组件的值，为空时默认为1，即默认选中数据源中的第一条数据；

• 组件使用

那么我们如何在表单中使用下拉选择的组件呢，如下：

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <!-- 下拉单选 -->
            {:widget('common/select',array('gender|1|性别|name|id',config('config.gender_list'),isset($info['gender']) ? $info['gender'] : 1))}
        </div>
    </div>
</form>

• 效果展示：