专为 Rails 设计的前端模块化框架

Tao Form 提供单选和多选两种选择字段,并且支持远程搜索选项。

单选

<%= tao_form person, url: docs_persons_path, remote: true do |f| %>
  <% colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'purple', 'brown', 'black', 'grey', 'white'] %>
  <%= f.input :colors, as: :select, collection: colors, selected: 'blue' %>
  <%= f.input :city, as: :grouped_select, remote: {
     url: docs_cities_path,
     searchKey: 'name_cont',
     totalOptionSize: 10
   } %>
<% end %>
请选择
没有找到匹配的选项
请输入关键字查找选项
没有选项
个选项没有显示,请使用更精确的搜索条件
正在加载...
请选择
没有找到匹配的选项
请输入关键字查找选项
没有选项
个选项没有显示,请使用更精确的搜索条件
正在加载...

多选

<%= tao_form person, url: docs_persons_path, remote: true do |f| %>
  <% colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'purple', 'brown', 'black', 'grey', 'white'] %>
  <%= f.input :colors, as: :select, collection: colors, multiple: true, selected: ['red', 'blue'] %>
  <%= f.input :city, as: :grouped_select, multiple: true, remote: {
     url: docs_cities_path,
     searchKey: 'name_cont',
     totalOptionSize: 10
   } %>
<% end %>
添加
没有找到匹配的选项
请输入关键字查找选项
没有选项
个选项没有显示,请使用更精确的搜索条件
正在加载...
添加
没有找到匹配的选项
请输入关键字查找选项
没有选项
个选项没有显示,请使用更精确的搜索条件
正在加载...

组件

选择组件可以脱离 input 作为单独的字段渲染,例如

<%= tao_form person, url: docs_persons_path, remote: true do |f| %>
  <%= tao_select f, :colors, [:red, :blue], include_blank: '选择颜色', class: 'select-field' %>
<% end %>
选择颜色
没有找到匹配的选项
请输入关键字查找选项
没有选项
个选项没有显示,请使用更精确的搜索条件
正在加载...

也可以脱离表单使用,例如:

<%= tao_select clearable: true, placeholder: '选择颜色' do %>
  <%= select_tag :colors, options_for_select(['red', 'blue']), include_blank: true %>
<% end %>
选择颜色
没有找到匹配的选项
请输入关键字查找选项
没有选项
个选项没有显示,请使用更精确的搜索条件
正在加载...

初始化选项

multiple
Boolean
Default: false

指定是否是多选组件。

remote
Hash
Default: null

如果想让选择组件通过远程接口搜索选项,那么需要给 remote 属性传入相关配置:

{
  url: '' // 远程接口的地址
  params: {} // 发起搜索请求时附带的参数
  searchKey: '' // 搜索参数的key,value是搜索框中输入的内容
  totalOptionSize: 0 // 可搜索的选项总数
}
max_list_size
Number
Default: 20

指定下拉列表中显示选项数量的上限,超过上限的选项会被隐藏。这个属性会直接渲染到子组件 tao_select_list 上,不会出现在 tao-select 上面。

searchable_size
Number
Default: 8

仅在单选组件中有效,指定到选项数量超过多少的时候显示搜索框。

clearable
Boolean
Default: null

仅在单选组件中有效,指定是否可以清除已经选择的值。默认情况下选择组件会通过 include_blankprompt 选项的值来自动计算 clearable 的值。

placeholder
String
Default: ""

仅在单选组件中有效,指定未选择状态下的提示文案。默认情况下选择组件会通过 include_blankprompt 选项的值来自动计算 placeholder 的值。

include_blank
Boolean / String
Default: false

跟 Rails 的 select_tag 方法的 include_blank 相同。

prompt
Boolean / String
Default: false

跟 Rails 的 select_tag 方法的 prompt 相同。

disabled
Boolean

指定组件的禁用状态。

公共方法

selectOption
( option )
Return: true / false

选择对应的选项。参数 option 是选项对应的 value。如果成功找到对应的选项并选中方法会返回 true,否则返回 false。

unselectOption
( option )
Return: true / false

取消选择对应的选项。参数 option 是选项对应的 value。如果成功找到对应的选项并取消选择方法会返回 true,否则返回 false。

事件

tao:change
( option )

当组件的已选择选项发生变化时触发,回调方法接受一个 option 参数,option 是 Tao.Form.Select.Option 类的实例,有 test valuedata 三个属性。