在Ember.js中创建分组选择框,可以使用Ember.js的组件和HTML中的<optgroup>
标签。以下是一个简单的示例:
grouped-select
的组件:ember generate component grouped-select
grouped-select.hbs
模板文件: {{#each-in groups as |group groupOptions|}}
<optgroup label={{group}}>
{{#each groupOptions as |option|}}
<option value={{option.value}}>{{option.label}}</option>
{{/each}}
</optgroup>
{{/each-in}}
</select>
grouped-select.js
组件文件:import Component from '@ember/component';
export default Component.extend({
groups: {
'Group 1': [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
],
'Group 2': [
{ label: 'Option 3', value: '3' },
{ label: 'Option 4', value: '4' },
],
},
});
grouped-select
组件:{{grouped-select}}
这样就可以在Ember.js应用中创建一个分组选择框。你可以根据需要修改groups
对象中的数据,以添加或删除分组和选项。
推荐的腾讯云相关产品:
这些产品可以与Ember.js应用程序结合使用,以提高性能和可靠性。
企业创新在线学堂
企业创新在线学堂
Elastic 实战工作坊
Elastic 实战工作坊
云原生正发声
云原生正发声
云+社区技术沙龙[第27期]
Elastic 实战工作坊
领取专属 10元无门槛券
手把手带您无忧上云