tree-select-infinite
tree-select-vue
说明
支持无限滚动、多级菜单、多选以及前端搜索的tree-select
组件
使用方式
注意⚠️:组件依赖于element-ui(版本需大于2.9.2)
1、在src/components目录中找到tree.vue
,复制到自己的项目中,然后引用,可以根据自己的需求自由更改。
2、npm install tree-select-infinite
demo.vue
<template>
<div>
<tree-select-infinite
:treeData="list"
v-model="value"
></tree-select-infinite>
</div>
</template>
```
<script>
import treeSelectInfinite from 'tree-select-infinite'
export default {
name: 'demo',
components: {
treeSelectInfinite
},
data() {
return {
list: [],
value: ''
}
}
main.js
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI)
3、传值
prop | example | type | 说明 |
---|---|---|---|
treeData | {value: 1, label: '1-1', children: [{value: 2, label: '2-1'}]} | Array | 传入的数据源 |
filterCheckedNodes | (checked) => checked.filter(f => f.level > 2) | Function | 过滤输入框内展示的tag,如只level大于2的tag |
formatTag | (tag) => tag.label + ' - ' + tag.level | Function | 格式化展示的tag |
formatTreeNode | (node) => node.label + ' ' + node.value | Function | 格式化展示的tree node |
本地查看
git clone 项目地址
cd tree-select-vue
npm install
npm run dev
- 构建:
npm run build
Dependencies
babel-core: ^6.0.0babel-loader: ^6.0.0babel-preset-latest: ^6.0.0cross-env: ^3.0.0css-loader: ^0.25.0element-theme-default: ^1.2.5element-ui: ^2.14.1file-loader: ^0.9.0node-sass: ^4.5.0sass-loader: ^5.0.1style-loader: ^2.0.0url-loader: ^4.1.1vue: ^2.2.1vue-loader: ^11.1.4vue-template-compiler: ^2.2.1webpack: ^3.2.0webpack-dev-server: ^2.2.0