66 lines
1.0 KiB
Markdown
66 lines
1.0 KiB
Markdown
|
## 下拉穿梭框
|
||
|
|
|
||
|
|
### layui transfer
|
||
|
|
|
||
|
|
```
|
||
|
|
//css调整部分
|
||
|
|
xm-select .scroll-body{
|
||
|
|
padding-left: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
:::demo
|
||
|
|
```html
|
||
|
|
|
||
|
|
<div id="demo1" style="width: 502px;"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var list = [
|
||
|
|
{value: "1", title: "李白" },
|
||
|
|
{value: "2", title: "杜甫" },
|
||
|
|
{value: "3", title: "贤心" },
|
||
|
|
]
|
||
|
|
|
||
|
|
var initValue = ["1"]
|
||
|
|
|
||
|
|
var demo1 = xmSelect.render({
|
||
|
|
el: '#demo1',
|
||
|
|
content: "<div id='transfer'></div>",
|
||
|
|
height: 'auto',
|
||
|
|
autoRow: true,
|
||
|
|
initValue: initValue,
|
||
|
|
data: list,
|
||
|
|
prop: { name: 'title' },
|
||
|
|
on: function(data){
|
||
|
|
if(!data.isAdd){
|
||
|
|
layui.transfer.reload('transfer', {
|
||
|
|
value: demo1.getValue('value')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
layui.transfer.render({
|
||
|
|
id: 'transfer',
|
||
|
|
elem: '#transfer', //绑定元素
|
||
|
|
title: ['候选人', '获奖者'],
|
||
|
|
data: list,
|
||
|
|
value: initValue,
|
||
|
|
onchange: function(data, index){
|
||
|
|
if(index == 0){
|
||
|
|
demo1.append(data)
|
||
|
|
}else{
|
||
|
|
demo1.delete(data)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
//这里仅仅提供一个演示, 更多的想法由你自己来创造
|
||
|
|
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
:::
|