br-dionysus 0.8.9 → 0.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +43 -34
- package/dist/br-dionysus.es.js +1093 -1073
- package/dist/br-dionysus.umd.js +3 -3
- package/dist/index.css +1 -1
- package/dist/packages/MNewSelectTable/src/MNewSelectTable.vue.d.ts +7 -0
- package/dist/packages/MSelectTable/src/MSelectTable.vue.d.ts +5 -0
- package/package.json +1 -1
- package/packages/MNewSelectTable/docs/README.md +6 -5
- package/packages/MNewSelectTable/docs/demo.vue +21 -14
- package/packages/MNewSelectTable/src/MNewSelectTable.vue +45 -12
- package/packages/MSelectTable/docs/README.md +16 -15
- package/packages/MSelectTable/src/MSelectTable.vue +6 -2
package/README.md
CHANGED
|
@@ -264,6 +264,7 @@ const test = ref<number>(0)
|
|
|
264
264
|
|
|
265
265
|
<template>
|
|
266
266
|
<m-new-select-table
|
|
267
|
+
class="zzz"
|
|
267
268
|
ref="selectRef"
|
|
268
269
|
v-model="code"
|
|
269
270
|
placeholder="请选择单号"
|
|
@@ -272,14 +273,15 @@ const test = ref<number>(0)
|
|
|
272
273
|
:keywords="{label: 'createdUserName',value: 'sn' }"
|
|
273
274
|
size="small"
|
|
274
275
|
@selected="selected"
|
|
275
|
-
multiple
|
|
276
276
|
@selectMultiple="selectMultiple"
|
|
277
|
+
multiple
|
|
277
278
|
filterable
|
|
278
279
|
tableHeight="200"
|
|
279
280
|
reserveSelection
|
|
280
281
|
:filterMethod="filterMethod"
|
|
281
282
|
@toPage="toPage"
|
|
282
|
-
|
|
283
|
+
isAffirmBtn
|
|
284
|
+
:total="total"
|
|
283
285
|
></m-new-select-table>
|
|
284
286
|
</template>
|
|
285
287
|
<script setup lang="ts">
|
|
@@ -289,21 +291,21 @@ import { Page } from 'packages/typings/class'
|
|
|
289
291
|
const commodityOptionsTitle: TableTitle[] = [{
|
|
290
292
|
prop: 'sn',
|
|
291
293
|
label: '单号',
|
|
292
|
-
minWidth: 200
|
|
294
|
+
// minWidth: 200
|
|
293
295
|
|
|
294
296
|
}, {
|
|
295
297
|
prop: 'fileName',
|
|
296
298
|
label: '文件名',
|
|
297
|
-
minWidth: 200
|
|
299
|
+
// minWidth: 200
|
|
298
300
|
}, {
|
|
299
301
|
prop: 'createdUserName',
|
|
300
|
-
minWidth: 300,
|
|
302
|
+
// minWidth: 300,
|
|
301
303
|
label: '上传者'
|
|
302
304
|
|
|
303
305
|
}, {
|
|
304
306
|
prop: 'createdTimeStr',
|
|
305
307
|
label: '上传时间',
|
|
306
|
-
minWidth: 200
|
|
308
|
+
// minWidth: 200
|
|
307
309
|
|
|
308
310
|
}]
|
|
309
311
|
const selectRef: any = ref<HTMLElement | null>(null)
|
|
@@ -361,19 +363,16 @@ const arr = [{
|
|
|
361
363
|
createdUserName: '绫波丽0',
|
|
362
364
|
createdTimeStr: '2024-05-06'
|
|
363
365
|
}]
|
|
366
|
+
const total = ref(0)
|
|
364
367
|
const options = ref()
|
|
365
368
|
|
|
366
|
-
const selected = (value: string
|
|
369
|
+
const selected = (value: string | number | Array<number | string>, row: any) => {
|
|
367
370
|
code.value = value
|
|
368
371
|
|
|
369
372
|
// console.log('selected',value)
|
|
370
373
|
// console.log('selected', row)
|
|
371
374
|
}
|
|
372
|
-
|
|
373
|
-
code.value = value
|
|
374
|
-
// console.log('selectMultiple',value)
|
|
375
|
-
// console.log('selectMultiple', rows)
|
|
376
|
-
}
|
|
375
|
+
|
|
377
376
|
const one = () => {
|
|
378
377
|
setTimeout(() => {
|
|
379
378
|
options.value = arr.map((item, index) => {
|
|
@@ -404,10 +403,15 @@ const toPage = (page: Page) => {
|
|
|
404
403
|
two()
|
|
405
404
|
}
|
|
406
405
|
}
|
|
406
|
+
total.value = arr.length
|
|
407
407
|
console.log(options.value)
|
|
408
408
|
|
|
409
409
|
}
|
|
410
|
-
|
|
410
|
+
const selectMultiple =(value: string | number | Array<number | string>, row: any) => {
|
|
411
|
+
code.value = value
|
|
412
|
+
// console.log('selected',value)
|
|
413
|
+
// console.log('selected', row)
|
|
414
|
+
}
|
|
411
415
|
|
|
412
416
|
|
|
413
417
|
onMounted(() => {
|
|
@@ -418,6 +422,7 @@ onMounted(() => {
|
|
|
418
422
|
setTimeout(() => {
|
|
419
423
|
code.value = ['SC201564981241', 'SC201564981243']
|
|
420
424
|
}, 0)
|
|
425
|
+
total.value = arr.length
|
|
421
426
|
})
|
|
422
427
|
const filterMethod = (searchValue: string, page: Page) => {
|
|
423
428
|
if (page.pageSize > 5) {
|
|
@@ -436,7 +441,9 @@ const filterMethod = (searchValue: string, page: Page) => {
|
|
|
436
441
|
</script>
|
|
437
442
|
|
|
438
443
|
<style>
|
|
439
|
-
|
|
444
|
+
.zzz{
|
|
445
|
+
width: 200px;
|
|
446
|
+
}
|
|
440
447
|
</style>
|
|
441
448
|
|
|
442
449
|
|
|
@@ -458,7 +465,7 @@ const filterMethod = (searchValue: string, page: Page) => {
|
|
|
458
465
|
| keywords | 关键字配置（value-key 配置）映射关键字 | Option | - | {label: 'label' ,value:'value'} |
|
|
459
466
|
| reserveSelection | 是否打开翻页多选 需要是多选才有效 | boolean | - | false |
|
|
460
467
|
| tableHeight | 表格高度 | string | number | 200 |
|
|
461
|
-
|
|
468
|
+
| isAffirmBtn | 是否有确认按钮 当使用此按钮时 selected事件无效 需使用selectMultiple事件 | boolean | - | false |
|
|
462
469
|
|
|
463
470
|
### 3) Option
|
|
464
471
|
| 参数 | 说明 | 类型 |
|
|
@@ -467,10 +474,11 @@ const filterMethod = (searchValue: string, page: Page) => {
|
|
|
467
474
|
| value | 绑定值 | string | number |
|
|
468
475
|
|
|
469
476
|
### 4) events
|
|
470
|
-
| 事件名
|
|
471
|
-
|
|
|
472
|
-
| selected
|
|
473
|
-
| toPage
|
|
477
|
+
| 事件名 | 说明 | 回调参数 |
|
|
478
|
+
| -------------- | -------------------------------------------- | --------------------------------------------------------------------------------------- |
|
|
479
|
+
| selected | 单选或多选之后的回调 | 根据多选和单选的模式不同 返回的也有所区别 单选为 (value,row) 多选为(values[],rows[]) |
|
|
480
|
+
| toPage | 当没有使用filterMethod时候才会有回调否则没有 | page 表格分页 |
|
|
481
|
+
| selectMultiple | 多选确认按钮时的回调 配合isAffirmBtn使用 | (values[],rows[]) |
|
|
474
482
|
|
|
475
483
|
### 5) Methods
|
|
476
484
|
| 方法名 | 说明 |
|
|
@@ -632,21 +640,22 @@ const remoteMethod = async (query: string = '', page: Page) => {
|
|
|
632
640
|
|
|
633
641
|
### 2) Attributes
|
|
634
642
|
|
|
635
|
-
| 参数 | 说明 | 类型 | 可选值 |
|
|
636
|
-
|
|
637
|
-
| value / v-model | 绑定值 | string | number |
|
|
638
|
-
| placeholder | 输入框默认 placeholder | string | - |
|
|
639
|
-
| disabled | 是否禁用 | boolean | - |
|
|
640
|
-
| options | 选项内容，详情见Options接口 | Option[] | - |
|
|
641
|
-
| tableTitle | 表格标题配置 | any[] | - |
|
|
642
|
-
| remoteMethod | 自定义远程搜索方法 | Function | - |
|
|
643
|
-
| allowCreate | 是否允许用户创建新条目 | boolean | - |
|
|
644
|
-
| focusShow | 是否聚焦显示（既，当搜索值为空时是否显示选择器） | - | false |
|
|
645
|
-
| isSelect | 是否多选 | boolean | - |
|
|
646
|
-
| clearable | 是否可以清空选项 | boolean | - |
|
|
647
|
-
| size | 数值输入框尺寸 | string | 'large', 'small', '' |
|
|
648
|
-
| scrollbarAlwaysOn | 总是显示滚动条 | boolean | - |
|
|
649
|
-
| total | 总数据量，当有值时，出现分页器 | number | null |
|
|
643
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
644
|
+
|-------------------|:------------------------:|:--------:|:--------------------:|:-------:|
|
|
645
|
+
| value / v-model | 绑定值 | string | number | - | '' |
|
|
646
|
+
| placeholder | 输入框默认 placeholder | string | - | '' |
|
|
647
|
+
| disabled | 是否禁用 | boolean | - | false |
|
|
648
|
+
| options | 选项内容，详情见Options接口 | Option[] | - | [] |
|
|
649
|
+
| tableTitle | 表格标题配置 | any[] | - | [] |
|
|
650
|
+
| remoteMethod | 自定义远程搜索方法 | Function | - | - |
|
|
651
|
+
| allowCreate | 是否允许用户创建新条目 | boolean | - | false |
|
|
652
|
+
| focusShow | 是否聚焦显示（既，当搜索值为空时是否显示选择器） | - | false | - |
|
|
653
|
+
| isSelect | 是否多选 | boolean | - | false |
|
|
654
|
+
| clearable | 是否可以清空选项 | boolean | - | false |
|
|
655
|
+
| size | 数值输入框尺寸 | string | 'large', 'small', '' | '' |
|
|
656
|
+
| scrollbarAlwaysOn | 总是显示滚动条 | boolean | - | - |
|
|
657
|
+
| total | 总数据量，当有值时，出现分页器 | number | null | - |
|
|
658
|
+
| labelKey | label映射key | string | - | 'label' |
|
|
650
659
|
|
|
651
660
|
#### Options（选项接口）
|
|
652
661
|
|