theluyuan/xm-select
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v1.0.6

Browse Source 
#### 新增

- 新增`showCount`配置, 可以控制选项的数量, 提高渲染性能
- 新增分组模式, 可以在选项中使用`optgroup`或`children`来开启, 分组时不建议开启分页模式
- 远程搜索中新增`show`参数, 可以查看当前下拉框是否显示

#### Bug fixes

- 修复工具条中`全选`和`清空`还可以操作禁用选项的问题
- 修复远程搜索中`selected`不回显的问题
This commit is contained in:
maplemei
2019-10-14 19:05:40 +08:00
parent 1c58a43a4b
commit 9b55425ebb
20 changed files with 384 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
docs/mds/XM05.md
View File

@@ -99,13 +99,13 @@ var demo4 = xmSelect.render({
el: '#demo4',
filterable: true,
remoteSearch: true,
remoteMethod: function(val, cb){
remoteMethod: function(val, cb, show){
//这里模拟3s后返回数据
setTimeout(function(){
//需要回传一个数组
cb([
{name: '水果' + val, value: val + 1},
{name: '蔬菜' + val, value: val + 2},
{name: '蔬菜' + val, value: val + 2, selected: true},
{name: '桌子' + val, value: val + 3},
{name: '北京' + val, value: val + 4},
])
@@ -116,3 +116,44 @@ var demo4 = xmSelect.render({
</script>
```
:::
### 远程搜索
第一步: 需要先开启搜索 `filterable: true,`
第二步: 开启自定义搜索 `remoteSearch: true`
第三部: 重写搜索回调
简单吧, 记得Star ^_^
:::demo `render`后, 就会进行一次回调, 用于渲染第一次数据
```html
<div id="demo5" class="xm-select-demo"></div>
<script>
var demo5 = xmSelect.render({
el: '#demo5',
filterable: true,
remoteSearch: true,
remoteMethod: function(val, cb, show){
axios({
method: 'get',
url: 'https://easy-mock.com/mock/5da028e2cda1720dffee5f85/xm-select/search',
params: {
keyword: val,
}
}).then(response => {
var res = response.data;
cb(res.data)
demo1.setValue([ 1, 2, 3 ], show)
}).catch(err => {
cb([]);
});
},
data: []
})
</script>
```
:::

2
docs/mds/XM16.md
View File

@@ -26,7 +26,7 @@ var demo1 = xmSelect.render({
:::
### 监听动态复制
### 监听+动态赋值
选中北京后, 不能选中上海, 二者互斥

39
docs/mds/XM20.md Normal file
View File

@@ -0,0 +1,39 @@
## 选项显示数量
:::tip
当数量量过大时, 又不想使用分页的形式, 就可以控制显示数量, 用搜索的方式把最适合的数据展示出来
!!! 此处与分页配置互斥, 开启分页后, 此配置无效
!!! 使用此配置时建议开启搜索模式, 否则无法显示全部数据
:::
:::demo
```html
<div id="demo1" class="xm-select-demo"></div>
<div>可以搜索 1, 2, 3看看效果</div>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
filterable: true,
showCount: 5,
data: [
{name: '张三1', value: 1, selected: true},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3},
{name: '赵六1', value: 4},
{name: '苹果2', value: 5},
{name: '香蕉2', value: 6},
{name: '凤梨2', value: 7},
{name: '葡萄2', value: 8},
{name: '樱桃3', value: 9},
{name: '车厘子3', value: 10},
{name: '火龙果3', value: 11},
]
})
</script>
```
:::

101
docs/mds/XM21.md Normal file
View File

@@ -0,0 +1,101 @@
## 分组
:::tip
使用分组时, 不建议开启分页, 也不建议开启选项数量控制!!!
:::
### optgroup模式
:::demo 指定选项中的`optgroup`为`true`
```html
<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`为数组
```html
<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
```html
<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>
```
:::

15
docs/mds/ZTEST.md
View File

@@ -10,10 +10,19 @@
var demo1 = xmSelect.render({
el: '#demo1',
filterable: true,
toolbar: {
show: true
},
height: '500px',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
{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>

7
docs/mds/options.md
View File

@@ -16,7 +16,7 @@
| delay | 搜索延迟 ms | int | - | 500 |
| filterMethod | 搜索回调函数 | function(val, item, index, prop) val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key | - | - |
| remoteSearch | 是否开启自定义搜索 (远程搜索)| boolean | true / false | false |
| remoteMethod | 自定义搜索回调函数 | function(val, cb) val: 当前搜索值, cb: 回调函数, 需要回调一个数组, 结构同data | - | - |
| remoteMethod | 自定义搜索回调函数 | function(val, cb, show) val: 当前搜索值, cb: 回调函数, 需要回调一个数组, 结构同data, show: 下拉框显示状态 | - | - |
| direction | 下拉方向| string | auto / up / down | auto |
| style | 自定义样式| object | - | { } |
| height | 默认最大高度| string | - | 200px |
@@ -36,6 +36,7 @@
| maxMethod | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值 | - | - |
| name | 表单提交时的name | string | - | select |
| toolbar | 工具条, 具体看下表 | object | - | - |
| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 |
### prop
@@ -45,7 +46,9 @@
| name | 显示名称 | string | - | name |
| value | 选中值 | string | - | value |
| selected | 是否选中 | string | - | selected |
| disabled | 是否警用 | string | - | disabled |
| disabled | 是否禁用 | string | - | disabled |
| children | 分组children | string | - | children |
| optgroup | 分组optgroup | string | - | optgroup |
### theme