此项目是基于Vue2和Element-UI封装的树形选择组件
大家有什么不懂和使用问题可以私信我：3390838200@qq.com 或者去 Element-UI 官网查看树形组件
效果图在仓库地址：Gitee：https://gitee.com/Git-Tu/st-tree-select-release.git
支持以下功能：
**多选、只可选叶子节点、禁用指定节点、禁用某一层的节点、多选情况下显父不显子、支持自动请求数据、和给定的数据就行渲染、以及多选情况下自动转换数组为字符串、酷炫加载 **
npm i @shutu/st-tree-select@latest-v2 -S然后在vue注册组件即可
import StTreeSelect from '@shutu/st-tree-select'
Vue.use(StTreeSelect)// 也可以配置全局的api返回接口字段,如有不懂可以参考下面的第六个功能点
import StTreeSelect from '@shutu/st-tree-select'
Vue.use(StTreeSelect, {field: 'data'})nodeKey: {
type: String,
default: 'id'
},
/**
* 配置选项
* @property {string} label - 标签字段名，默认为 'nodeKey',
* @property {string} children - 子级字段名，默认为 'children',
*/
props: Object,指定multiple为true就行
指定leafOnly为true就行
效果：
给出要禁用的id：disableIds: [9]
效果：
给出对应的数组：disableLayer: [0]，默认从 0 开始
效果：
只是不显示，但任然是处于被选中状态
指定为childVisible为false就行
效果：
这个功能需要给定一个接口api和这个接口需要的参数params和返回值里面数据所在的字段field
/**
* api
*/
api: Function,
/**
* 请求参数
*/
params: vObject,
/**
* 选项返回结构的层级(例如是response.data) 那么就是data 默认值为''
*/
field: {
type: String,
default: ''
}如果觉得麻烦可以在vue注册时一致性全局设置
import StTreeSelect from 'st-tree-select'
Vue.use(StTreeSelect, {field: 'data'})这个功能只有给定一个dic数组就行
多选情况一般值都是数组，我们可以通过指定stringValue为true就行，这样就返回都是一个字符串类似 "1,2,3"
checkStrictly 父子联动默认为true
clearable 一键清空模式默认为true
accordion 手风琴模式默认为true
酷炫加载是自动的根据数据请求和处理时间显示的
效果：
如果不满足现有的样式，可以使用插槽自定自己的样式
<template slot-scope="{ node, data }"><template>
<div>
<el-card style="padding-top: 150px;margin: 0 auto; width: 1200px;height: 300px">
<el-form label-width="100px">
<el-row :gutter="2">
<el-col :span="12">
<el-form-item label="级别1">
<st-tree-select v-model="value1" :dic="dic" :disableIds="disableIds"
:props="{label:'label'}" multiple/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="级别2">
<StTreeSelect v-model="value2" :child-visible="false" :dic="dic"
:disableLayer="disableLayer"
:props="{label:'label'}" multiple/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="2">
<el-col :span="12">
<el-form-item label="级别3">
<StTreeSelect v-model="value3" :api="loadApi" :params="{id:12}" :props="{label:'label'}"
field="info" leaf-only multiple/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
disableLayer: [0],
disableIds: [9],
value1: [1],
value2: '1',
value3: 1,
dic: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
children: [
{
id: 9,
label: '三级 1-1-1'
},
{
id: 10,
label: '三级 1-1-2'
}
]
}
]
}, {
id: 2,
label: '一级 2',
children: [
{
id: 5,
label: '二级 2-1'
},
{
id: 6,
label: '二级 2-2'
}
]
}, {
id: 3,
label: '一级 3',
children: [
{
id: 7,
label: '二级 3-1'
},
{
id: 8,
label: '二级 3-2'
}
]
}
]
}
},
methods: {
loadApi() {
return new Promise(resolve => {
setTimeout(() => {
resolve({
code: 200,
msg: 'success',
info: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
children: [
{
id: 9,
label: '三级 1-1-1'
},
{
id: 10,
label: '三级 1-1-2'
}
]
}
]
}, {
id: 2,
label: '一级 2',
children: [
{
id: 5,
label: '二级 2-1'
},
{
id: 6,
label: '二级 2-2'
}
]
}, {
id: 3,
label: '一级 3',
children: [
{
id: 7,
label: '二级 3-1'
},
{
id: 8,
label: '二级 3-2'
}
]
}
]
})
}, 3000)
})
}
}
}
</script>