@qhh/virtual-list
v0.1.6
Published
使用 Vue 3 + Typescript + Vite
Downloads
13
Readme
#虚拟树 使用 Vue 3 + Typescript + Vite
node 节点样例
{
id: 0,
label: '全部',
parentId: null, // 根节点的 parentId 必须为 null
disabled: false, // 可选
children: [
{
id: 1,
label: '全部',
parentId: 0, // 根节点的 parentId 必须为 null
disabled: false, // 可选
children: null
}
]
}
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | :----- | :----- | :----- | :----- | | hasInput | 是否含有过滤输入框,输入框过滤支持多个关键词,逗号隔开(中英都可以),eg: '位置 1,位置 2,位置 3'| Boolean | -- | false | | customSearch | 自定义搜索块,配合searchKeyword | Boolean | -- | false | | 配合searchKeyword | v-model绑定值 , 用于搜索 | String | -- | '' | | placeholder | 过滤输入框的 placeholder,配合 hasInput 使用 | String | -- | 请输入关键字进行查找 | | indent | 缩进 | String, Number | -- | 15 | | expandLevel | 展开程度 | String, Number | 'all',1,2,3,,, | 'all' | | expandKeys | 指定 id 展开, 若指定 id 展开,则 expandLevel 失效 | Array | | [] | | isLoading | 是否展示'加载中...'指示状态 | Boolean | -- | false | | checkedAction | 操作 label 执行选中 | String | 'none': 不选中;'click': 单击选中;'dblclick': 双击选中| 'none' | | emptyText | 内容为空展示的文本 | String | -- | 暂无数据 | | showCheckbox | 是否展示 checkbox | Boolean | -- | false | | showCheckboxLeafOnly| 是否仅叶子节点展示 checkbox, 配合 showCheckbox = true 才有效。 | Boolean | -- | false | | defaultCheckedKeys | 默认选中, SetData 之后赋值。 | Array | -- | [] | | checkStrictly | 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法 | Boolean | -- | false |
方法
| 方法名称 | 说明 | 参数 | | ------ | :----- | :----- | |SetData | 设置tree | tree(Array 类型) | |setCheckedKeys | 回显选中状态 | id 组成的数组 | |setCheckedNodes | 回显选中状态 | node 节点组成的数组 | |getCheckedKeys | 返回id 组成的数组 | -- | |getCheckedNodes | 返回 node 节点组成的数组 | -- | |clearChecked | 清空所有选中 | -- | |setExpand | 指定 id 展开 | id 组成的数组 | |showCheckedOnly | 只展示选中的项,此方法会置空过滤条件 | isOnlyInCheckedSearch, 是否只在选中的节点里进行筛选, 默认 true | |restore | 对 showCheckedOnly 之后进行恢复 | -- | |update | 手动更新选中状态 | -- | |clear | 清空内存占用 | -- |
Events
| 事件名称 | 说明 | 回调参数 | | ------ | :----- | :----- | |onChange | 选中状态变化触发 | ({ checkedKeys, checkedNodes }) | |onClickLabel | 点击 label 触发 | node | |onClickCheckbox | 点击 checkbox 触发, 获取当前点击的节点 | node |
Scoped Slot
| name | 说明 |
| ------ | :----- |
|default | label 的 slot, eg: <template #default="{ slotScope }"><span><i>★</i> {{ slotScope.label }}</span></template>
|
|preInput | input 输入框前的 slot, eg: <template #preInput><span>https://</span></template>
|
|loading | 自定义加载中 slot, eg: <template #loading><i>加载中...</i></template>
|
|expandIcon | 自定义展开图标 slot, eg: <template #expandIcon><img src="test.jpg" /></template>
|