0.1.0-stable • Published 1 year ago
@shutu/shutu-ui v0.1.0-stable
shutu-ui（测试中）
简介
此项目是基于Vue2和Element-UI封装的树形选择组件
大家有什么不懂和使用问题可以私信我：3390838200@qq.com 或者去 Element-UI 官网查看树形组件
效果图在仓库地址：Gitee：https://gitee.com/Git-Tu/shutu-ui-release.git
支持以下功能：
多选、只可选叶子节点、禁用指定节点、禁用某一层的节点、多选情况下显父不显子、支持自动请求数据、和给定的数据就行渲染、以及多选情况下自动转换数组为字符串、酷炫加载
使用方法
npm i @shutu/shutu-ui@latest-v2 -S然后在vue注册组件即可
import ShuTuUi from '@shutu/shutu-ui'
Vue.use(ShuTuUi)也可以为每一个组件配置对应的参数
import ShuTuUi from '@shutu/shutu-ui'
const options = {
StButton: { size: 'large' },
StTable: { size: 'small', option: { /* ... */ }, field: { /* ... */ } },
};
Vue.use(ShuTuUi, options);功能介绍
1、多选
2、只可选叶子节点
3、禁用指定节点
4、禁用某一层的节点
5、多选情况下显父不显子
6、自动向后端请求数据
/**
* api
*/
api: Function,
/**
* 请求参数
*/
params: vObject,
/**
* 选项返回结构的层级(例如是response.data) 那么就是data 默认值为''
*/
field: {
type: String,
default: ''
}如果觉得麻烦可以在vue注册时一致性全局设置
import StTreeSelect from 'st-tree-select'
Vue.use(StTreeSelect, {field: 'data'})7、对给定的数据就行渲染
8、多选情况下自动转换数组为字符串
其他的配置
Node的样式配置
案例代码
<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>