57 lines
1.1 KiB
Markdown
57 lines
1.1 KiB
Markdown
## 监听选择
|
|
|
|
|
|
### 实时监听
|
|
|
|
实时监听多选的选中状态变化
|
|
|
|
:::demo
|
|
```html
|
|
<div id="demo1" class="xm-select-demo"></div>
|
|
|
|
<script>
|
|
var demo1 = xmSelect.render({
|
|
el: '#demo1',
|
|
on({ arr, item, selected }){
|
|
alert(`name: ${item.name}, 状态: ${selected}`)
|
|
},
|
|
data: [
|
|
{name: '张三', value: 'zhangsan', selected: true},
|
|
{name: '李四', value: 'lisi', selected: true},
|
|
{name: '王五', value: 'wangwu'},
|
|
]
|
|
})
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
|
|
### 监听动态复制
|
|
|
|
选中北京后, 不能选中上海, 二者互斥
|
|
|
|
:::demo
|
|
```html
|
|
<div id="demo2" class="xm-select-demo"></div>
|
|
|
|
<script>
|
|
var demo2 = xmSelect.render({
|
|
el: '#demo2',
|
|
on({ arr, item, selected }){
|
|
if(selected){
|
|
var index = arr.findIndex(i => i.mutex == item.mutex && i.value != item.value);
|
|
if(index != -1){
|
|
arr.splice(index, 1);
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{name: '北京', value: 1, mutex: 1, selected: true},
|
|
{name: '上海', value: 2, mutex: 1},
|
|
{name: '广州', value: 3},
|
|
]
|
|
})
|
|
</script>
|
|
```
|
|
:::
|