@shutu/st-select

st-select

简介

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

大家有什么不懂和使用问题可以私信我：[e-mail] 或者去 Element-UI 官网查看选择器组件

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

支持以下功能：

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

使用方法

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

然后在vue注册组件即可

import StSelect from '@shutu/st-select'

Vue.use(StSelect)

也可以配置全局的api返回接口字段,如有不懂可以参考下面的第三个功能点

import StSelect from '@shutu/st-select'

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

功能介绍

重要的配置

/**
 *  配置选项
 *  @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、根据禁用字段禁用节点

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

效果：

3、自动向后端请求数据

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

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

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

import StSelect from 'st-select'

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

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

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

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

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

其他的配置

clearable 一键清空模式默认为true

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

效果：

演示代码

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