st-tree-select v0.1.2

st-tree-select

简介

此项目是根据Element-UI封装的树形选择组件，

大家有什么不懂和使用问题可以私信我：3390838200@qq.com 或者去 Element-UI 官网查看树形组件

效果图在仓库地址：Gitee：https://gitee.com/Git-Tu/st-tree-select.git

支持以下功能：

多选、只可选叶子节点、禁用指定节点、禁用某一层的节点、多选情况下显父不显子、支持自动请求数据、和给定的数据就行渲染、以及多选情况下自动转换数组为字符串、酷炫加载

使用方法

npm install st-tree-select

然后在vue注册组件即可

import StTreeSelect from 'st-tree-select'
Vue.use(StTreeSelect)

功能介绍

重要的配置

nodeKey: {
    type: String,
    default: 'id'
},
/**
 *  配置选项
 *  @property {string} label - 标签字段名，默认为 'nodeKey',
 *  @property {string} children - 子级字段名，默认为 'children',
 */
props: Object,

1、多选

指定multiple为true就行

2、只可选叶子节点

指定leafOnly为true就行

效果：

3、禁用指定节点

给出要禁用的id：disableIds: [9]

效果：

4、禁用某一层的节点

给出对应的数组：disableLayer: [0]，默认从 0 开始

效果：

5、多选情况下显父不显子

只是不显示，但任然是处于被选中状态

指定为childVisible为false就行

效果：

6、自动向后端请求数据

这个功能需要给定一个接口api和这个接口需要的参数params和返回值里面数据所在的字段field

/**
 * api
 */
api: Function,
/**
 * 请求参数
 */
params: Object,
/**
 * 选项返回结构的层级(例如是response.data) 那么就是data 默认值为data
 */
field: {
    type: String,
    default: 'data'
},

如果觉得麻烦可以在vue注册时一致性全局设置

import StTreeSelect from 'st-tree-select'
Vue.use(StTreeSelect, { field: 'data' })

7、对给定的数据就行渲染

这个功能只有给定一个dic数组就行

8、多选情况下自动转换数组为字符串

多选情况一般值都是数组，我们可以通过指定stringValue为true就行，这样就返回都是一个字符串类似 "1,2,3"

其他的配置

checkStrictly 父子联动默认为true

clearable 一键清空模式默认为true

accordion 手风琴模式默认为true

酷炫加载是自动的根据数据请求和处理时间显示的

效果：

Node配置

如果不满足现有的样式，可以使用插槽自定自己的样式

<template slot-scope="{ node, data }">