9b55425ebb
#### 新增 - 新增`showCount`配置, 可以控制选项的数量, 提高渲染性能 - 新增分组模式, 可以在选项中使用`optgroup`或`children`来开启, 分组时不建议开启分页模式 - 远程搜索中新增`show`参数, 可以查看当前下拉框是否显示 #### Bug fixes - 修复工具条中`全选`和`清空`还可以操作禁用选项的问题 - 修复远程搜索中`selected`不回显的问题
2.1 KiB
2.1 KiB
分组
:::tip 使用分组时, 不建议开启分页, 也不建议开启选项数量控制!!! :::
optgroup模式
:::demo 指定选项中的optgroup为true
<div id="demo1" class="xm-select-demo"></div>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
toolbar:{
show: true,
},
height: '500px',
data: [
{name: '销售员', optgroup: true},
{name: '张三1', value: 1, selected: true},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3, disabled: true},
{name: '奖品', optgroup: true},
{name: '苹果2', value: 4, selected: true, disabled: true},
{name: '香蕉2', value: 5},
{name: '葡萄2', value: 6},
]
})
</script>
:::
children模式
:::demo 选项中的children为数组
<div id="demo2" class="xm-select-demo"></div>
<script>
var demo2 = xmSelect.render({
el: '#demo2',
toolbar:{
show: true,
},
filterable: true,
height: '500px',
data: [
{name: '销售员', children: [
{name: '张三1', value: 1, selected: true},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3, disabled: true},
]},
{name: '奖品', children: [
{name: '苹果2', value: 4, selected: true, disabled: true},
{name: '香蕉2', value: 5},
{name: '葡萄2', value: 6},
]},
]
})
</script>
:::
混合模式
如果自己感觉舒服的话, 也可以这么用...
:::demo
<div id="demo3" class="xm-select-demo"></div>
<script>
var demo3 = xmSelect.render({
el: '#demo3',
filterable: true,
toolbar: {
show: true
},
height: '500px',
data: [
{name: '城市', optgroup: true},
{name: '北京13', value: 1},
{name: '天津1', value: 2, selected: true, disabled: true},
{name: '上海1', value: 3},
{name: '销售员', children: [
{name: '李四23', value: 4, selected: true},
{name: '王五2', value: 5},
]},
],
})
</script>
:::