穿梭框组件的初衷来源于 layui 社区的扩展组件平台,并且在 layui 2.5.0 的版本中开始登场。其适用的业务场景多样,不妨一试。
模块加载名称:transfer
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script src="/static/layui/layui.all.js" charset="utf-8"></script>
目前 transfer 组件提供以下基础参数,可根据需要进行相应的设置
参数选项 | 说明 | 类型 | 默认值 |
---|---|---|---|
elem | 指向容器选择器 | String/Object | - |
title | 穿梭框上方标题 | Array | ['标题一', '标题二'] |
data | 数据源 | Array | [{}, {}, …] |
parseData | 用于对数据源进行格式解析 | Function | 详见数据源格式解析 |
value | 初始选中的数据(右侧列表) | Array | - |
id | 设定实例唯一索引,用于基础方法传参使用。 | String | - |
showSearch | 是否开启搜索 | Boolean | false |
width | 定义左右穿梭框宽度 | Number | 200 |
height | 定义左右穿梭框高度 | Number | 340 |
text | 自定义文本,如空数据时的异常提示等。 text: { none: '无数据' //没有数据时的文案 ,searchNone: '无匹配数据' //搜索无匹配数据时的文案 } |
Object | - |
onchange | 左右数据穿梭时的回调 | Function | 详见穿梭时的回调 |
穿梭框组件极易上手,在浩瀚的业务需求中,值得一用。
layui - 在每一个细节中,用心与你沟通