# st-select-release

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

## Basic Information

- **Project Name**: st-select-release
- **Description**: st-select的演示仓库
- **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-select

## 简介

此项目是基于`Vue2`和`Element-UI`封装的选择器组件，多种属性和el-select是一样的

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

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

支持以下功能：

**多选、前缀渲染、后缀渲染、禁用指定节点、支持自动请求数据、和给定的数据就行渲染、以及多选情况下自动转换数组为字符串、酷炫加载**

## 使用方法

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

然后在vue注册组件即可
```js
import StSelect from '@shutu/st-select'

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

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

## 功能介绍

### 重要的配置

```js
/**
 *  配置选项
 *  @property {string} label - 标签字段名，默认为 'value',
 *  @property {string} value - 标签字段名，默认为 'value',
 *  @property {string} desc - 描述字段名，默认为 null,
 *  @property {string} prefix - 前缀字段名，默认为 null,
 *  @property {string} suffix - 后缀字段名，默认为 null,
 */
props: Object,
```

### 1、多选

指定`multiple`为true就行

### 2、根据禁用字段禁用节点

```js
/**
 *  禁用选项
 *  @property {string} field - 禁用字段名，默认为 'disabled',
 *  @property {string} value - 禁用字段值，默认为 null,
 */
disable: Object,
```

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

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

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

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

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

```js
import StSelect from 'st-select'

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

### 4、对给定的数据就行渲染

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

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

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

### 其他的配置

`clearable ` 一键清空模式默认为true

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

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

## 演示代码

```vue
<template>
    <div style="padding: 30px">
        <el-card style=" margin: 0 auto; width: 1200px;height: 300px">
            <el-form label-width="150px">
                <el-row :gutter="50">
                    <el-col :span="12">
                        <el-form-item label="选择1">
                            <st-select v-model="value1" :dic="dic"
                                       :disable="{value:'12'}"
                                       :props="{label:'label',prefix:'@  ',desc:'desc',suffix:'  描述'}"
                                       multiple/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选择2">
                            <StSelect v-model="value2" :dic="dic"
                                      :disable="{value:true}"
                                      :props="{label:'label',prefix:'@  ',desc:'label',suffix:'  描述'}"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="50">
                    <el-col :span="12">
                        <el-form-item label="选择3">
                            <StSelect v-model="value3" :api="loadApi"
                                      :disable="{value:true}"
                                      :params="{id:1}"
                                      :props="{label:'label',prefix:'前缀  ',desc:'label',suffix:'  后缀'}"
                                      field="info"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            disable: {field: 'value', value: 2},
            value1: 1,
            value2: 2,
            value3: 7,
            dic: [
                {label: '一级', value: 1, desc: '这是一个'},
                {label: '二级', value: 2, desc: '这是一个'},
                {label: '三级', value: 3, desc: '这是一个'},
                {label: '四级', value: 4, disabled: '12'},
                {label: '五级', value: 5, disabled: true},
            ]
        }
    },
    methods: {
        loadApi() {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve({
                        info: [
                            {label: '六级', value: 6, desc: '这是一个'},
                            {label: '七级', value: 7, desc: '这是一个'},
                            {label: '八级', value: 8, desc: '这是一个'},
                            {label: '九级', value: 9, disabled: '12'},
                            {label: '十级', value: 10, disabled: true},
                        ],
                        code: 200,
                        msg: 'success'
                    })
                }, 3000)
            })
        }
    }
}
</script>

```