Bootstrap Select - 下拉
全局引入
在 EApp
中默认初始化了 .select-picker
的select(在EApp.initComponents里初始化的),如需手动初始化可使用以下方式
EApp.initSelectPicker('#id');
字典
如果select中数据来源于字典,可直接在select标签中添加 data-dict-type="字典类别代码"
,会自动将字典插入到select中。
<!-- 举个栗子 -->
<select class="form-control e-bootstrap-select select-picker"
data-dict-type="commonStatus"></select>
如果需要倒序排列,可以添加data-reverse="true"
属性实现
接口
如果select中数据来源于接口逗号可以直接在select标签中添加 data-url="接口地址"
,会自动请求接口获取数据
<!-- 举个栗子 -->
<select class="form-control e-bootstrap-select select-picker"
data-url="${ctxPath}/auth/sample/select/data"></select>
后端请返回以下格式数据
{
code: 200,
message: "请求成功",
data: [
{
value: "1",
text: "文字"
}
]
}
多选
如果select需要多选可以添加multiple
属性,默认值使用data-value="1,2,3"
设置,将多选的option->value
使用,
拼接
<!-- 举个栗子 -->
<select class="form-control e-bootstrap-select select-picker" multiple></select>
静态
如果select内容为固定内容,请直接写option
<!-- 举个栗子 -->
<select class="form-control e-bootstrap-select select-picker">
<option value="1">文字</option>
</select>
- 如需显示搜索框请添加
data-live-search="true"
- 如需多选请添加
multiple
- 其他需求请参照官方文档
- 如数据来源于字典或接口,默认会添加空选项,如不需要请添加
data-no-empty="true"