通过url来读取数据源。数据格式如下:
|
{"list":[ {"key":"小陈","value":"1"}, {"key":"访客","value":"2"}, {"key":"小李","value":"3"}, {"key":"小张","value":"4"}, {"key":"小王","value":"5"}, {"key":"小赵","value":"6"}, {"key":"小钱","value":"7"}, {"key":"小孙","value":"8"} ]} |
Ø 数据默认的前缀是list,可以通过dataRoot属性指定。
Ø 下拉框的prompt设置下拉框的提示项显示文本,如果不设置则没有提示项
Ø 选中下拉框后,可通过其value得到所选值,另外还有三个属性与值有关:relValue等同于value,relText代表选中项的文本,editValue代表编辑后的值(下拉框可编辑时有效)。
API说明:
|
参数名 |
默认值 |
说明 |
|
prompt |
无 |
下拉框提示项 |
|
value |
无 |
下拉框选中项的值 |
|
relValue |
无 |
下拉框选中项的值 |
|
relText |
无 |
下拉框选中项的文本 |
|
editValue |
无 |
编辑后的值(下拉框可编辑时有效) |
|
name |
无 |
提交表单时使用 |
|
url |
无 |
以路径的方式指定下拉框数据源 |
|
params |
无 |
设置url时需要传递的参数,为json格式的字符串 |
|
data |
无 |
以json格式的字符串的方式 |
|
disabled |
false |
是否禁用 |
|
selWidth |
120 |
下拉框的宽度 |
|
boxWidth |
自适应 |
下拉列表的宽度,默认会根据选项自适应,但不会小于下拉框的宽度。 可通过设置该值来自定义下拉列表宽度 |
|
boxHeight |
自适应 |
下拉列表高度,默认会根据浏览器可见高度和组件当前的位置来自适应,放不下自动出现滚动条。 可通过设置该值来自定义下拉列表高度 |
|
openDirection |
自动判断 |
下拉列表展开方向,可选值:top,bottom 默认智能判断上面下面哪个方向能放得下就向哪里展开。 可通过设置该值来强制下拉列表向上或向下展开 |
|
editable |
false |
是否可编辑 |
|
colNum |
1 |
自定义显示列数 |
|
colWidth |
100 |
自定义列宽,与colNum连用 |
|
childId |
无 |
联动时使用,指定下一个要联动的下拉框 |
|
childDataPath |
无 |
联动时使用,设置下一个要联动下拉框的数据,与当前选中项的value来拼出url路径 |
|
selectedValue |
|
用于设置初始时选中值 |
|
selectedIdx |
|
用于设置初始时选项索引 |
|
keepDefaultStyle |
false |
设为true,将会变为浏览器原始的下拉框 |
|
change事件 |
|
下拉框选择事件,需要使用bind方式来绑定 |
|
onchange事件 |
|
下拉框选择事件,直接写在标签里 |
|
ajaxInit事件 |
|
当下拉框数据加载完后触发,一般用在多级联动里,用来重置其他下拉框的数据 |
|
data() |
|
为下拉框动态设置数据源,以json数据的格式 |
|
setValue() |
参数为该项的value |
选中某一项 |
|
addItem() |
参数格式如: {key:
"新增项",
value: "100"} |
添加一项,添加到最末尾 |
|
removeItem() |
参数为该项的value |
移除某一项 |
|
resetValue() |
|
下拉框重置值 |
|
render() |
|
当动态创建下拉框或改变下拉框属性时,最后需要调用render()来更新。 |
参数说明
Ø json格式的字符串跟json数据的区别在于,json数据的key可以不加引号,而json格式字符串的key和value都要加双引号;
Ø 同一个组件不要既设置selectedIdx又设置selectedValue