YbPaginationSelect 分页选择器
远程分页加载 select 选择器下拉选项，默认 pageSize 为 10。
# 基本使用
- 10条/页
- 20条/页
- 30条/页
- 40条/页
- 50条/页
- 100条/页
共 0 条1 前往页
无数据
<template>
<yb-pagination-select
:onRemote="request"
:optionsFieldMap="optionsFieldMap"
v-model="selectValue"
searchWhenOpen
multiple
isShowSelectAll
default-first-option
:asyncPagination="false"
reserve-keyword
clearable
allow-create
remote
optionInValue
>
</yb-pagination-select>
</template>
<script>
const data =
'[{"value":"选项1","text":"黄金糕"},{"value":"选项2","text":"双皮奶"},{"value":"选项3","text":"蚵仔煎"},{"value":"选项4","text":"龙须面"},{"value":"选项5","text":"北京烤鸭"},{"value":"选项6","text":"钵仔糕"},{"value":"选项7","text":"冰糖葫芦"},{"value":"选项8","text":"葡式蛋挞"},{"value":"选项9","text":"凤梨酥"},{"value":"选项10","text":"鸡蛋仔"},{"value":"选项11","text":"车轮饼"},{"value":"选项12","text":"菠萝包"}]';
const options = [
{
label: '门诊',
value: '门诊',
},
{
label: '住院',
value: '住院',
},
];
export default {
data() {
return {
selectValue: [
// {
// label: '外围',
// value: '外围',
// },
],
optionsFieldMap: {
label: 'label',
value: 'value',
key: 'value',
},
};
},
mounted() {
// setTimeout(() => {
// this.selectValue = [
// {
// label: '外围',
// value: '外围',
// },
// ];
// }, 5000);
},
methods: {
request(query) {
console.log(query);
// 模拟的后端接口的查询
return new Promise((resolve) => {
let optionsList = options.filter((item) => {
return (
!query.queryWord ||
item.text
.toLowerCase()
.indexOf(query.queryWord.toLowerCase()) > -1
);
});
setTimeout(() => {
return resolve({
total: optionsList.length,
options: optionsList.slice(
(query.currentPage - 1) * query.pageSize,
query.currentPage * query.pageSize
),
});
}, 2000);
});
},
},
};
</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
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
显示 复制 复制
# 自定义选项展示内容
默认每个选项的 label 值与 value 值不同时，会把 value 值显示在右边，可以通过 option 插槽自定义显示
- 10条/页
- 20条/页
- 30条/页
- 40条/页
- 50条/页
- 100条/页
共 0 条1 前往页
无数据
<template>
<yb-pagination-select
:request="request"
:optionsFieldMap="optionsFieldMap"
v-model="selectValue"
multiple
is-show-select-all
collapse-tags
filterable
clearable
reserve-keyword
searchWhenOpen
>
<template #option="data">
<span style="float: left">{{ data.optionItem.label }}</span>
<el-tag style="float: right;"> {{ data.optionItem.value }} </el-tag>
</template>
</yb-pagination-select>
</template>
<script>
const data =
'[{"value":"选项1","text":"黄金糕"},{"value":"选项2","text":"双皮奶"},{"value":"选项3","text":"蚵仔煎"},{"value":"选项4","text":"龙须面"},{"value":"选项5","text":"北京烤鸭"},{"value":"选项6","text":"钵仔糕"},{"value":"选项7","text":"冰糖葫芦"},{"value":"选项8","text":"葡式蛋挞"},{"value":"选项9","text":"凤梨酥"},{"value":"选项10","text":"鸡蛋仔"},{"value":"选项11","text":"车轮饼"},{"value":"选项12","text":"菠萝包"}]';
const options = JSON.parse(data);
export default {
data() {
return {
selectValue: '',
optionsFieldMap: {
label: 'text',
value: 'value',
key: 'value',
},
};
},
methods: {
request(query) {
return new Promise((resolve) => {
let optionsList = options.filter((item) => {
return (
!query.queryWord ||
item.text
.toLowerCase()
.indexOf(query.queryWord.toLowerCase()) > -1
);
});
setTimeout(() => {
return resolve({
total: optionsList.length,
options: optionsList.slice(
(query.currentPage - 1) * query.pageSize,
query.currentPage * query.pageSize
),
});
}, 2000);
});
},
},
};
</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
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
显示 复制 复制
其他功能同 yb-select ， 比如 多选、选中的值是对象 等
# Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| onRemote/request | 加载下拉选项数据 | function(currentPage, pageSize, queryWord) | -- | -- |
| pageSize | 每页加载条数 | number | -- | 10 |
| filterable | 开启过滤 | boolean | -- | true |
| remote | 开启远程过滤 | boolean | -- | true |
| asyncPagination | 异步分页，如果 false 即在现有的 options 中静态分页 | boolean | -- | true |
| - | 同yb-select | -- | -- | -- |
# Events
| 参数 | 说明 | 回调参数 |
|---|---|---|
| valueChange | 选中值发生变化时触发，当时考虑不全的 api，建议直接用 change | (value:string, valueOption:object) |
| - | 同yb-select |
上次更新: 2024/06/21, 11:16:11