e6select

support singleselect multipleselect treelistselect ...

Usage no npm install needed!

<script type="module">
  import e6select from 'https://cdn.skypack.dev/e6select';
</script>

README

此组件为 beseselect 组件,基于vue封装的树形列表组件,目前已上传npm和git,可直接安装/下载使用。 如有bug和其他需求,请联系作者进行扩展和修改。

1.安装

npm i e6select

2.用法

import e6Select from 'e6select'  

<script>
export default {
    components:{
        e6Select
    }
}
</script>

3.支持类型

  • 列表单选/多选

  • 远程数据源

  • 树形列表单选/多选

4.属性

参数 类型 是否必须 默认值 说明
dataList Array [] 数据源
minSelectNum Number 0 最少选几项
maxSelectNum Number 100000000 最多选几项
placeholder String '' 默认展示
placement String '' (1.2.21新增)打开方向,默认""时,自动判断下方是否有足够空间展示,否则向上打开,"bottom"指定只向下打开,"top"指定只向上打开
filterable Boolean false 是否可搜索
widthData String '220px' 宽度
multiple Boolean false 是否多选
issingleleaf Boolean false slotTemplate='tree'时生效,是否只能选择叶子【true-联动并只返回叶子节点数据,false-不联动,返回叶子+树干数据】
multipleSelected Boolean false 多选是否带全选/反选操作
slotTemplate String 'common' 'common'--一般列表,'tree'--树形列表,'slot'--自定义插槽
selectedListDefault Array [] 修改页面进入时,默认选中数据,以ID数组传入
disabled Boolean false 是否禁用
remoteFilterable Boolean false 是否远程搜索
needDistinct Boolean true 是否对文本框中的“已选择:1”进行去重处理
disabledNoCheck Boolean false 是否枝干节点不能 check

[^注]: 树形列表数据,与树形列表组件数据一致, common 列表为 [{key:'', value:''}] 数组

** selectedListDefault 如果是异步获取的值,最好在异步获取到结果之后,通过API的方式设置默认值 **

**
树形列表的时候,如果不需要父子联动,并且父节点可单独选择,需要单独配置 issingleleaf="false" , e6-tree 的用法一致 **

5.事件

事件 名称 说明
multipleSelect 选择结果回调方法 无论单选多选,列表还是树,当选中/清空选中时触发该方法,参数为选中结果数组[{key:'', value:''},{key:'', value:''}]
remotemethod 远程搜索回调方法 传递搜索参数,使用时可调用远程方法搜索,完成之后,修改数据源
search 自定义插槽搜索回调 传递搜索参数,使用时可自行过滤数据,完成之后,修改数据源

6.API方法

事件 名称 说明
setDefaultSelect 设置默认选中 接收1个参数,需要选中项的key数组,返回一个Promise,resolve结果和multipleSelect回调结果数据类型相同
setSelectList 设置选中 接收1个参数,key数组,当在页面内发生选项变化时可调用,返回promise,防止在部分情况下因调用顺序问题导致的错误
getSelectValues 获取选中项 需要主动获取选中项时调用此方法,返回结果数组[{key:'', value:''},{key:'', value:''}]
showDataList 主动触发列表显示 --
multipleRemoveAll 移除全部选中项 --
multipleRemove 移除某一个选中项 接收1个参数{key:''}对象(兼容低版本已使用的场景),或者直接传id,即multipleRemove({key:111})或者multipleRemove(111)