# st-tree-select-release

**Repository Path**: Git-Tu/st-tree-select-release

## Basic Information

- **Project Name**: st-tree-select-release
- **Description**: asd
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-07
- **Last Updated**: 2024-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# st-tree-select

## 简介

此项目是基于`Vue2`和`Element-UI`封装的树形选择组件

大家有什么不懂和使用问题可以私信我：3390838200@qq.com
或者去 [Element-UI](https://element.eleme.cn/#/zh-CN/component/tree) 官网查看树形组件

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

支持以下功能：

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

## 使用方法

```shell
npm i @shutu/st-tree-select@latest-v2 -S
```

然后在vue注册组件即可

```js
import StTreeSelect from '@shutu/st-tree-select'

Vue.use(StTreeSelect)
```

```js
// 也可以配置全局的api返回接口字段,如有不懂可以参考下面的第六个功能点
import StTreeSelect from '@shutu/st-tree-select'

Vue.use(StTreeSelect, {field: 'data'})
```

## 功能介绍

### 重要的配置

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

### 1、多选

指定`multiple`为true就行

### 2、只可选叶子节点

指定`leafOnly`为true就行

效果：![image-20240403155048066](assets/image-20240403155048066.png)

### 3、禁用指定节点

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

效果：![image-20240403154816021](assets/image-20240403154816021.png)

### 4、禁用某一层的节点

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

效果：![image-20240403154606291](assets/image-20240403154606291.png)

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

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

指定为`childVisible`为`false`就行

效果：![image-20240403155244695](assets/image-20240403155244695.png)

### 6、自动向后端请求数据

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

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

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

```js
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

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

效果：![image-20240403162446964](assets/image-20240403162446964.png)

#### Node的样式配置

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

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

## 案例代码

```vue
<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>
```