Yb-components
  • 组件
  • 数据录入
liaoyingmin
2023-03-10

YbSelect 选择器

在el-select (opens new window)基础功能上扩展，将 el-option 处理成数数据结构的方式 ，不仅支持 el-select 的所有功能，增加了 多选模式的全选等。

yb-select 不直接依赖 el-select，而是依赖 yb-select-base

yb-select-base 与 el-select 功能等同，yb-select-base 在 el-select 基础上改了一点源码，为解决多选模式下又在 transform:scale(0.6) 缩放了整个下拉框组件的情况，出现高度/宽度计算不准问题：

函数request 与 el-select 的filter-method、remote-method的区别：

request 在组件初始化时会调用一次获取第一份 options

request + filterable 效果与 el-select 的 filterable 相同

request + filterable + filter-method 效果与 el-select 的 filterable+ filter-method 相同

request + filterable + remote可以达到 remote-method + filterable +remote 的远程搜索目的

request + params 可以方便实现其他控件的值通过 params 传入且改变时，触发 request ,达到控件间的联动请求 options

# 基本用法

默认字段：
指定字段：
格式化： 
<template>
    <div style="margin-bottom:20px">
        默认字段：
        <yb-select v-model="optionValue" :options="options" />
    </div>

    <div style="margin-bottom:20px">
        指定字段：
        <yb-select
            v-model="optionValue"
            :options="optionsProps"
            :optionsFieldMap="{label:'text'}"
        />
    </div>

    <div style="margin-bottom:20px">
        格式化：
        <yb-select
            v-model="optionValue"
            :options="optionsProps"
            :formatter="formatter"
        />
    </div>
</template>
<script>
    export default {
        data() {
            return {
                optionValue: '',
                options: [
                    { value: '黄金糕', label: '黄金糕' },
                    { value: '双皮奶', label: '双皮奶' },
                    { value: '蚵仔煎', label: '蚵仔煎' },
                    { value: '龙须面', label: '龙须面' },
                ],
                optionsProps: [
                    { value: '黄金糕', text: '黄金糕' },
                    { value: '双皮奶', text: '双皮奶' },
                    { value: '蚵仔煎', text: '蚵仔煎' },
                    { value: '龙须面', text: '龙须面' },
                ],
            };
        },
        methods: {
            formatter(item) {
                return {
                    value: item.value,
                    label: item.text,
                };
            },
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
显示 复制

# 选中值为 Object 类型

  • 期望 value 值为 object 类型时使用 optionInValue 属性
{"value":"黄金糕","label":"黄金糕"}
<template>
    <div>
        <yb-select v-model="optionValue" :options="options" optionInValue />
        <div style="margin-top:10px;">{{JSON.stringify(optionValue)}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                optionValue: { value: '黄金糕', label: '黄金糕' },
                options: [
                    { value: '黄金糕', label: '黄金糕' },
                    { value: '双皮奶', label: '双皮奶' },
                    { value: '蚵仔煎', label: '蚵仔煎' },
                    { value: '龙须面', label: '龙须面' },
                ],
            };
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
显示 复制

# 枚举用法

  • 枚举的键：选项的 key 和 value
  • 枚举的键值：选项的 label
<template>
    <yb-select v-model="enumValue" :valueEnum="valueEnum" />
</template>
<script>
    export default {
        data() {
            return {
                enumValue: '',
                valueEnum: {
                    黄金糕: '黄金糕',
                    双皮奶: '双皮奶',
                    蚵仔煎: '蚵仔煎',
                    龙须面: '龙须面',
                },
            };
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
显示 复制

# 懒加载

  • params 默认请求参数，当改变时，会触发请求
默认字段：
指定字段：
添加参数：
打开面板进行搜索：
依赖字段配置： 
<template>
    <div style="margin-bottom:20px">
        默认字段：
        <yb-select v-model="requestValue" :request="getOptionRequest" />
    </div>

    <div style="margin-bottom:20px">
        指定字段：
        <yb-select
            v-model="propsValue"
            :optionsFieldMap="{label:'text'}"
            :request="getPropsOptionRequest"
        />
    </div>

    <div style="margin-bottom:20px">
        添加参数：
        <yb-select
            :params="params"
            v-model="paramsValue"
            :request="getOptionRequest"
        />
        <el-button @click="changeParams">改变参数</el-button>
    </div>

    <div style="margin-bottom:20px">
        打开面板进行搜索：
        <yb-select
            searchWhenOpen
            v-model="searchWhenOpenValue"
            :request="searchWhenOpenRequest"
        />
    </div>
    <div style="margin-bottom:20px">
        依赖字段配置：
        <yb-select
            :params="params"
            :dependence="['value']"
            v-model="dependenceValue"
            :request="dependenceRequest"
        />
    </div>
</template>
<script>
    export default {
        data() {
            return {
                requestValue: '',
                propsValue: '',
                paramsValue: '',
                searchWhenOpenValue: '',
                dependenceValue: '',
                params: {
                    value: '黄金糕',
                },
            };
        },
        methods: {
            getOptionRequest(params) {
                const data = [
                    { value: '黄金糕', label: '黄金糕' },
                    { value: '双皮奶', label: '双皮奶' },
                    { value: '蚵仔煎', label: '蚵仔煎' },
                    { value: '龙须面', label: '龙须面' },
                ];
                return new Promise((resolve) => {
                    setTimeout(() => {
                        if (params.value) {
                            return resolve(
                                data.filter(
                                    (item) => item.value === params.value
                                )
                            );
                        }
                        return resolve(data);
                    }, 300);
                });
            },
            getPropsOptionRequest() {
                return [
                    { value: '黄金糕', text: '黄金糕' },
                    { value: '双皮奶', text: '双皮奶' },
                    { value: '蚵仔煎', text: '蚵仔煎' },
                    { value: '龙须面', text: '龙须面' },
                ];
            },
            searchWhenOpenRequest() {
                return Promise.resolve([
                    { value: '黄金糕', text: '黄金糕' },
                    { value: '双皮奶', text: '双皮奶' },
                    { value: '蚵仔煎', text: '蚵仔煎' },
                    { value: '龙须面', text: '龙须面' },
                ]);
            },
            dependenceRequest() {
                return Promise.resolve([
                    { value: '黄金糕', text: '黄金糕' },
                    { value: '双皮奶', text: '双皮奶' },
                    { value: '蚵仔煎', text: '蚵仔煎' },
                    { value: '龙须面', text: '龙须面' },
                ]);
            },
            changeParams() {
                this.paramsValue = '';
                this.params.value = '龙须面';
            },
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
显示 复制

# 分组

<template>
    <yb-select v-model="value" :options="options" />
</template>
<script>
    export default {
        data() {
            return {
                value: '',
                options: [
                    {
                        label: '热门城市',
                        children: [
                            {
                                value: 'Shanghai',
                                label: '上海',
                            },
                            {
                                value: 'Beijing',
                                label: '北京',
                            },
                        ],
                    },
                    {
                        label: '城市名',
                        children: [
                            {
                                value: 'Chengdu',
                                label: '成都',
                            },
                            {
                                value: 'Shenzhen',
                                label: '深圳',
                            },
                            {
                                value: 'Guangzhou',
                                label: '广州',
                            },
                            {
                                value: 'Dalian',
                                label: '大连',
                            },
                        ],
                    },
                ],
            };
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
显示 复制

# 选项横排

<template>
    <yb-select v-model="value" :options="options" optionsArrangeToRight />
</template>
<script>
    export default {
        data() {
            return {
                value: '',
                options: [
                    {
                        label: '热门城市',
                        children: [
                            {
                                value: 'Shanghai',
                                label: '上海',
                            },
                            {
                                value: 'Beijing',
                                label: '北京',
                            },
                        ],
                    },
                    {
                        label: '城市名',
                        children: [
                            {
                                value: 'Chengdu',
                                label: '成都',
                            },
                            {
                                value: 'Shenzhen',
                                label: '深圳',
                            },
                            {
                                value: 'Guangzhou',
                                label: '广州',
                            },
                            {
                                value: 'Dalian',
                                label: '大连',
                            },
                        ],
                    },
                ],
            };
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
显示 复制

# 其他属性

单选
size
clearable
disabled
filterable
多选
collapse-tags
multiple-limit 
<template>
    <el-divider content-position="left">单选</el-divider>
    <el-row>
        <el-col :span="10">
            <div style="margin-bottom:20px">
                size
                <el-radio-group v-model="otherProps['size']" size="mini">
                    <el-radio-button label="medium">medium</el-radio-button>
                    <el-radio-button label="small">small</el-radio-button>
                    <el-radio-button label="mini">mini</el-radio-button>
                </el-radio-group>
            </div>
            <div style="margin-bottom:20px">
                clearable
                <el-switch v-model="otherProps['clearable']"></el-switch>
            </div>
            <div style="margin-bottom:20px">
                disabled
                <el-switch v-model="otherProps['disabled']"></el-switch>
            </div>
            <div style="margin-bottom:20px">
                filterable
                <el-switch v-model="otherProps['filterable']"></el-switch>
            </div>
        </el-col>
        <el-col :span="12">
            <yb-select v-model="value" :options="options" v-bind="otherProps" />
        </el-col>
    </el-row>
    <el-divider content-position="left">多选</el-divider>
    <el-row>
        <el-col :span="10">
            <div style="margin-bottom:20px">
                collapse-tags
                <el-switch v-model="multipleProps['collapse-tags']"></el-switch>
            </div>
            <div style="margin-bottom:20px">
                multiple-limit
                <el-input-number
                    v-model="multipleProps['multiple-limit']"
                    :min="0"
                    :max="10"
                />
            </div>
        </el-col>
        <el-col :span="12">
            <yb-select
                v-model="multipleValue"
                :options="options"
                v-bind="multipleProps"
                multiple
            />
        </el-col>
    </el-row>
</template>
<script>
    export default {
        data() {
            return {
                value: '',
                otherProps: {
                    size: 'small',
                },
                multipleValue: [],
                multipleProps: {
                    'multiple-limit': 1,
                },
                options: [
                    { value: '黄金糕', label: '黄金糕' },
                    { value: '双皮奶', label: '双皮奶' },
                    { value: '蚵仔煎', label: '蚵仔煎' },
                    { value: '龙须面', label: '龙须面' },
                ],
            };
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
显示 复制

# 全选

  • 全选功能默认 multiple 属性为 true 时生效，需要关闭则 is-show-select-all 设置为 false
  • 若设置全选，并设置 multiple-limit，会自动叠加未选中数据的前几项
  • 若选项中存在禁用状态的选项，点击全选也无法被选中
<template>
    <yb-select
        v-model="optionValue"
        :options="options"
        multiple
        is-show-select-all
        collapse-tags
    />
</template>
<script>
    export default {
        data() {
            return {
                optionValue: ['黄金糕0'],
                options: new Array(100).fill(1).map((item, index) => {
                    return {
                        value: '黄金糕' + index,
                        label: '黄金糕' + index,
                        disabled: index % 2 !== 0,
                    };
                }),
            };
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
显示 复制

# 插槽使用

el-select 插槽
pre
new 插槽
new 作用域插槽 
<template>
    <el-divider content-position="left">el-select 插槽</el-divider>
    <yb-select v-model="value" :options="options">
        <template v-slot>
            <div>option 最后一项</div>
        </template>
        <template v-slot:prefix>
            <div>pre</div>
        </template>
        <template v-slot:empty>
            <el-empty :image-size="70"></el-empty>
        </template>
    </yb-select>
    <el-divider content-position="left">
        <el-tag type="danger">new</el-tag>
        插槽
    </el-divider>
    <yb-select v-model="value" :options="options">
        <template v-slot:top>
            <div style="padding:5px 10px">top</div>
        </template>
        <template v-slot:bottom>
            <div style="padding:5px 10px">bottom</div>
        </template>
    </yb-select>
    <el-divider content-position="left">
        <el-tag type="danger">new</el-tag>
        作用域插槽
    </el-divider>
    <yb-select v-model="value" :options="options">
        <template v-slot:option="{ optionItem, options }">
            <span style="float: left">{{ optionItem.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">
                {{ optionItem.value }}
            </span>
        </template>
    </yb-select>
</template>
<script>
    export default {
        data() {
            return {
                value: '',
                options: [
                    { value: '黄金糕', label: '黄金糕' },
                    { value: '双皮奶', label: '双皮奶' },
                    { value: '蚵仔煎', label: '蚵仔煎' },
                    { value: '龙须面', label: '龙须面' },
                    { value: '鸡蛋仔', label: '鸡蛋仔' },
                    { value: '北京烤鸭', label: '北京烤鸭' },
                    { value: '钵仔糕', label: '钵仔糕' },
                    { value: '冰糖葫芦', label: '冰糖葫芦' },
                    { value: '葡式蛋挞', label: '葡式蛋挞' },
                    { value: '凤梨酥', label: '凤梨酥' },
                ],
            };
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
显示 复制

# 可搜索

  • 设置 filterable 和 remote 为 true，request 函数即可远程搜索，并且提供 params.queryWord
<template>
    <yb-select
        filterable
        remote
        :request="getOptionRequest"
        v-model="filterableValue"
    />
</template>
<script>
    export default {
        data() {
            return {
                filterableValue: '',
            };
        },
        methods: {
            getOptionRequest(params) {
                const data = [
                    { value: '黄金糕', label: '黄金糕' },
                    { value: '双皮奶', label: '双皮奶' },
                    { value: '蚵仔煎', label: '蚵仔煎' },
                    { value: '龙须面', label: '龙须面' },
                ];
                return new Promise((resolve) => {
                    setTimeout(() => {
                        if (params.queryWord) {
                            return resolve(
                                data.filter((item) =>
                                    item.value.includes(params.queryWord)
                                )
                            );
                        }
                        return resolve(data);
                    }, 1000);
                });
            },
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
显示 复制

原 el-select 的 value-key 优先级高于 optionsFieldMap.key，用途是一样的，定义了optionsFieldMap.key 就可以不用 value-key 了

# YbSelect Attributes

参数 说明 类型 可选值 默认值
options 下拉选项数据，优先级仅次于 request array -- --
valueEnum 下拉选项数据枚举，优先级最低 object -- --
request 加载下拉选项数据，返回 Promise 或者 Array，优先级最高 function({queryWord,...others}){} -- --
params 加载下拉选项数据的请求参数，与 request 配合使用，当数据改变时，触发 request object -- --
debounceTime 防抖动时间，与 request 配合使用 number -- 300
searchWhenOpen 是否每次打开面板加载数据，与 request 配合使用 boolean -- --
props 改名为 optionsFieldMap object -- --
optionsFieldMap 选项中字段映射，如果全选无效请确认是否给定 optionsFieldMap.key，详见 YbSelect optionsFieldMap object -- --
formatter 格式化数据，function(item) 需返回渲染数据 function -- --
dependence 依赖字段，当设置依赖字段时，只有依赖字段值发生变化才会调用 request array -- --
isShowSelectAll 是否显示全选，详见 全选用法 boolean -- true
optionInValue 选项的 value 为 object 类型，详见 Object 用法 boolean -- false
expandedKeys 当存在分组的选项时，展开的分组的 keys , 支持 sync 修饰符 array -- --
defaultExpandAll 当存在分组的选项时，是否默认全部展开 , 如果是数字类型，可以让前几组默认展开 boolean | number -- true
optionsArrangeToRight 选项是否从左往右排布，一行最多排 4 个 boolean -- false
valueChangeToRequest 当使用了 request 获取选项时，只要 value 在外部被改变时会触发一次 request 函数，无论 searchWhenOpen 是否开启 boolean -- false
-- 其他属性同 el-select (opens new window) -- -- --

# YbSelect optionsFieldMap

参数 说明 类型 可选值 默认值
label 指定节点标签为节点对象的某个属性值 string -- 'label'
value 指定节点值为节点对象的某个属性值 string -- 'value'
key 指定节点 key 为节点对象的某个属性值，在多选和 optionInValue 时，请保证 options[optionsFieldMap.key]值是唯一的 string -- 'value'
disabled 指定节点禁用为节点对象的某个属性值 string -- 'disabled'
children 指定节点分组子节点数据为节点对象的某个属性值 string -- 'children'

# YbSelect Slots

name 说明
default 下拉选项内容，在渲染的选项最后显示
prefix Select 组件头部内容
empty 无选项时的列表
top 下拉面板顶部
bottom 下拉面板底部

# YbSelect Scoped Slots

name 说明 参数
option 下拉选项 { optionItem, options }

# YbSelect Methods

方法名称 说明 参数 返回值
getSelect 取得 el-select 的组件实例 - -
setOptionsLoading 用于显示/取消显示下拉框内的 loading boolean -

调用el-select Methods (opens new window)的方法，调用方式是 this.$refs['select']['methodName']()

// 例如
this.$refs['select'].getSelect().focus();
1
2

# YbSelect Events

同 el-select (opens new window)

上次更新: 2024/11/28, 14:11:11
YbThemeSelect 主题风格选择器
YbPaginationSelect 分页选择器

← YbPaginationSelect 分页选择器→

Theme by Vdoing | Copyright © 2021-2025 YB-GZ | MIT License