@netang/quasar 0.1.16 → 0.1.17
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/_docs/docs/utils/table.md +1 -0
- package/components/field-table/index.vue +2 -2
- package/components/private/table-visible-columns-button/index.vue +109 -109
- package/components/table/index.vue +13 -13
- package/package.json +1 -1
- package/utils/$table.js +370 -200
- package/utils/$tree.js +712 -713
|
@@ -172,6 +172,7 @@ const $table = $n.$table.create({
|
|
|
172
172
|
| tableRowClick | 表格单击表格行 | `Function` | @row-click="tableRowClick" |
|
|
173
173
|
| tableRowDblclick | 表格双击表格行 | `Function` | @row-dblclick="currentTableRowDblclick" |
|
|
174
174
|
| setTableSearchOptions | 设置表格搜索参数 | `Function` | - |
|
|
175
|
+
| reCreate | 重新创建表格 | `Function` | - |
|
|
175
176
|
|
|
176
177
|
|
|
177
178
|
## $table.config
|
|
@@ -852,10 +852,10 @@ export default {
|
|
|
852
852
|
const columns = []
|
|
853
853
|
|
|
854
854
|
// 如果有原始表格列数据
|
|
855
|
-
if ($n_isValidArray($table.tableColumns)) {
|
|
855
|
+
if ($n_isValidArray($table.tableColumns.value)) {
|
|
856
856
|
|
|
857
857
|
// 克隆原始表格列数据
|
|
858
|
-
const rawTableColumns = $n_cloneDeep($table.tableColumns)
|
|
858
|
+
const rawTableColumns = $n_cloneDeep($table.tableColumns.value)
|
|
859
859
|
|
|
860
860
|
// 快捷表格显示的属性名称数组
|
|
861
861
|
$n_forEach(currentShowKeys.value, function (key) {
|
|
@@ -1,109 +1,109 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<!-- 表格筛选可见列按钮-->
|
|
3
|
-
<q-btn
|
|
4
|
-
icon="checklist"
|
|
5
|
-
dense
|
|
6
|
-
round
|
|
7
|
-
flat
|
|
8
|
-
v-if="tableColumns.length"
|
|
9
|
-
>
|
|
10
|
-
<q-menu
|
|
11
|
-
self="top middle"
|
|
12
|
-
:offset="[0, 8]"
|
|
13
|
-
>
|
|
14
|
-
<q-list style="min-width: 250px" dense bordered>
|
|
15
|
-
|
|
16
|
-
<!-- 表格宫格 -->
|
|
17
|
-
<template v-if="tableGrid !== null">
|
|
18
|
-
<q-item
|
|
19
|
-
clickable
|
|
20
|
-
@click="tableGrid = ! tableGrid"
|
|
21
|
-
>
|
|
22
|
-
<q-item-section>宫格模式</q-item-section>
|
|
23
|
-
<q-item-section side>
|
|
24
|
-
<q-icon
|
|
25
|
-
size="xs"
|
|
26
|
-
name="check"
|
|
27
|
-
v-show="tableGrid"
|
|
28
|
-
/>
|
|
29
|
-
</q-item-section>
|
|
30
|
-
</q-item>
|
|
31
|
-
<q-separator />
|
|
32
|
-
</template>
|
|
33
|
-
|
|
34
|
-
<!-- 筛选表格列 -->
|
|
35
|
-
<q-item
|
|
36
|
-
v-for="item in tableColumns"
|
|
37
|
-
clickable
|
|
38
|
-
@click="onTableVisible(item)"
|
|
39
|
-
>
|
|
40
|
-
<q-item-section>{{item.label}}</q-item-section>
|
|
41
|
-
<q-item-section side>
|
|
42
|
-
<q-icon
|
|
43
|
-
size="xs"
|
|
44
|
-
name="check"
|
|
45
|
-
v-show="indexOf(tableVisibleColumns, item.name) > -1"
|
|
46
|
-
/>
|
|
47
|
-
</q-item-section>
|
|
48
|
-
</q-item>
|
|
49
|
-
</q-list>
|
|
50
|
-
</q-menu>
|
|
51
|
-
</q-btn>
|
|
52
|
-
</template>
|
|
53
|
-
|
|
54
|
-
<script>
|
|
55
|
-
import { inject } from 'vue'
|
|
56
|
-
|
|
57
|
-
import $n_indexOf from '@netang/utils/indexOf'
|
|
58
|
-
|
|
59
|
-
import { NTableKey } from '../../../utils/symbols'
|
|
60
|
-
|
|
61
|
-
export default {
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
* 组合式
|
|
65
|
-
*/
|
|
66
|
-
setup() {
|
|
67
|
-
|
|
68
|
-
// ==========【方法】=============================================================================================
|
|
69
|
-
|
|
70
|
-
// 获取表格注入数据
|
|
71
|
-
const {
|
|
72
|
-
// 表格列数据(对象数组)
|
|
73
|
-
tableColumns,
|
|
74
|
-
// 表格可见列
|
|
75
|
-
tableVisibleColumns,
|
|
76
|
-
// 表格宫格
|
|
77
|
-
tableGrid,
|
|
78
|
-
} = inject(NTableKey)
|
|
79
|
-
|
|
80
|
-
/**
|
|
81
|
-
* 表格可见列点击
|
|
82
|
-
*/
|
|
83
|
-
function onTableVisible(item) {
|
|
84
|
-
const index = $n_indexOf(tableVisibleColumns.value, item.name)
|
|
85
|
-
if (index > -1) {
|
|
86
|
-
tableVisibleColumns.value.splice(index, 1)
|
|
87
|
-
} else {
|
|
88
|
-
tableVisibleColumns.value.push(item.name)
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
// ==========【返回】=============================================================================================
|
|
93
|
-
|
|
94
|
-
return {
|
|
95
|
-
// 表格列数据(对象数组)
|
|
96
|
-
tableColumns,
|
|
97
|
-
// 表格可见列
|
|
98
|
-
tableVisibleColumns,
|
|
99
|
-
// 表格宫格
|
|
100
|
-
tableGrid,
|
|
101
|
-
|
|
102
|
-
// 表格可见列点击
|
|
103
|
-
onTableVisible,
|
|
104
|
-
|
|
105
|
-
indexOf: $n_indexOf,
|
|
106
|
-
}
|
|
107
|
-
},
|
|
108
|
-
}
|
|
109
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<!-- 表格筛选可见列按钮-->
|
|
3
|
+
<q-btn
|
|
4
|
+
icon="checklist"
|
|
5
|
+
dense
|
|
6
|
+
round
|
|
7
|
+
flat
|
|
8
|
+
v-if="tableColumns.length"
|
|
9
|
+
>
|
|
10
|
+
<q-menu
|
|
11
|
+
self="top middle"
|
|
12
|
+
:offset="[0, 8]"
|
|
13
|
+
>
|
|
14
|
+
<q-list style="min-width: 250px" dense bordered>
|
|
15
|
+
|
|
16
|
+
<!-- 表格宫格 -->
|
|
17
|
+
<template v-if="tableGrid !== null">
|
|
18
|
+
<q-item
|
|
19
|
+
clickable
|
|
20
|
+
@click="tableGrid = ! tableGrid"
|
|
21
|
+
>
|
|
22
|
+
<q-item-section>宫格模式</q-item-section>
|
|
23
|
+
<q-item-section side>
|
|
24
|
+
<q-icon
|
|
25
|
+
size="xs"
|
|
26
|
+
name="check"
|
|
27
|
+
v-show="tableGrid"
|
|
28
|
+
/>
|
|
29
|
+
</q-item-section>
|
|
30
|
+
</q-item>
|
|
31
|
+
<q-separator />
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<!-- 筛选表格列 -->
|
|
35
|
+
<q-item
|
|
36
|
+
v-for="item in tableColumns"
|
|
37
|
+
clickable
|
|
38
|
+
@click="onTableVisible(item)"
|
|
39
|
+
>
|
|
40
|
+
<q-item-section>{{item.label}}</q-item-section>
|
|
41
|
+
<q-item-section side>
|
|
42
|
+
<q-icon
|
|
43
|
+
size="xs"
|
|
44
|
+
name="check"
|
|
45
|
+
v-show="indexOf(tableVisibleColumns, item.name) > -1"
|
|
46
|
+
/>
|
|
47
|
+
</q-item-section>
|
|
48
|
+
</q-item>
|
|
49
|
+
</q-list>
|
|
50
|
+
</q-menu>
|
|
51
|
+
</q-btn>
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<script>
|
|
55
|
+
import { inject, watch } from 'vue'
|
|
56
|
+
|
|
57
|
+
import $n_indexOf from '@netang/utils/indexOf'
|
|
58
|
+
|
|
59
|
+
import { NTableKey } from '../../../utils/symbols'
|
|
60
|
+
|
|
61
|
+
export default {
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* 组合式
|
|
65
|
+
*/
|
|
66
|
+
setup() {
|
|
67
|
+
|
|
68
|
+
// ==========【方法】=============================================================================================
|
|
69
|
+
|
|
70
|
+
// 获取表格注入数据
|
|
71
|
+
const {
|
|
72
|
+
// 表格列数据(对象数组)
|
|
73
|
+
tableColumns,
|
|
74
|
+
// 表格可见列
|
|
75
|
+
tableVisibleColumns,
|
|
76
|
+
// 表格宫格
|
|
77
|
+
tableGrid,
|
|
78
|
+
} = inject(NTableKey)
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* 表格可见列点击
|
|
82
|
+
*/
|
|
83
|
+
function onTableVisible(item) {
|
|
84
|
+
const index = $n_indexOf(tableVisibleColumns.value, item.name)
|
|
85
|
+
if (index > -1) {
|
|
86
|
+
tableVisibleColumns.value.splice(index, 1)
|
|
87
|
+
} else {
|
|
88
|
+
tableVisibleColumns.value.push(item.name)
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// ==========【返回】=============================================================================================
|
|
93
|
+
|
|
94
|
+
return {
|
|
95
|
+
// 表格列数据(对象数组)
|
|
96
|
+
tableColumns,
|
|
97
|
+
// 表格可见列
|
|
98
|
+
tableVisibleColumns,
|
|
99
|
+
// 表格宫格
|
|
100
|
+
tableGrid,
|
|
101
|
+
|
|
102
|
+
// 表格可见列点击
|
|
103
|
+
onTableVisible,
|
|
104
|
+
|
|
105
|
+
indexOf: $n_indexOf,
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
}
|
|
109
|
+
</script>
|
|
@@ -184,6 +184,7 @@
|
|
|
184
184
|
import { ref, watch, computed, inject, onMounted } from 'vue'
|
|
185
185
|
|
|
186
186
|
import $n_isFunction from 'lodash/isFunction'
|
|
187
|
+
import $n_isNil from 'lodash/isNil'
|
|
187
188
|
|
|
188
189
|
import $n_isValidObject from '@netang/utils/isValidObject'
|
|
189
190
|
import $n_isValidValue from '@netang/utils/isValidValue'
|
|
@@ -245,6 +246,8 @@ export default {
|
|
|
245
246
|
type: Array,
|
|
246
247
|
default: ()=>[],
|
|
247
248
|
},
|
|
249
|
+
// 默认树已选节点 v-model:tree-selected
|
|
250
|
+
treeSelected: [ String, Number ],
|
|
248
251
|
// 树节点点击
|
|
249
252
|
treeNodeClick: Function,
|
|
250
253
|
// 是否选中第一个树节点
|
|
@@ -284,7 +287,7 @@ export default {
|
|
|
284
287
|
/**
|
|
285
288
|
* 组合式
|
|
286
289
|
*/
|
|
287
|
-
setup(props, { slots }) {
|
|
290
|
+
setup(props, { slots, emit }) {
|
|
288
291
|
|
|
289
292
|
// ==========【数据】============================================================================================
|
|
290
293
|
|
|
@@ -324,7 +327,7 @@ export default {
|
|
|
324
327
|
const treeFilterValue = ref('')
|
|
325
328
|
|
|
326
329
|
// 树选择数据
|
|
327
|
-
const treeSelected = ref(
|
|
330
|
+
const treeSelected = ref(props.treeSelected)
|
|
328
331
|
|
|
329
332
|
// 是否显示搜索
|
|
330
333
|
const showSearch = ref(false)
|
|
@@ -382,17 +385,16 @@ export default {
|
|
|
382
385
|
.toObject()
|
|
383
386
|
})
|
|
384
387
|
|
|
385
|
-
// 是否已选择过第一个节点
|
|
386
|
-
let isSelectedFirstNode = false
|
|
387
|
-
|
|
388
388
|
/**
|
|
389
389
|
* 监听树选择数据
|
|
390
390
|
*/
|
|
391
391
|
watch(treeSelected, function(nodeKey) {
|
|
392
392
|
|
|
393
|
+
// 触发更新已选树节点
|
|
394
|
+
emit('update:treeSelected', nodeKey)
|
|
395
|
+
|
|
393
396
|
// 如果节点值不是有效值
|
|
394
397
|
if (! $n_isValidValue(nodeKey)) {
|
|
395
|
-
|
|
396
398
|
// 则无任何操作
|
|
397
399
|
return
|
|
398
400
|
}
|
|
@@ -415,19 +417,17 @@ export default {
|
|
|
415
417
|
*/
|
|
416
418
|
watch(() => props.treeNodes, function (val) {
|
|
417
419
|
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
420
|
+
if (
|
|
421
|
+
// 如果关闭选中第一个树节点
|
|
422
|
+
! props.treeSelectFirstNode
|
|
423
|
+
|| ! $n_isNil(treeSelected.value)
|
|
424
|
+
) {
|
|
421
425
|
// 则无任何操作
|
|
422
426
|
return
|
|
423
427
|
}
|
|
424
428
|
|
|
425
429
|
// 选中第一个节点的值
|
|
426
430
|
treeSelected.value = val[0][props.treeNodeKey]
|
|
427
|
-
|
|
428
|
-
// 已选择过第一个节点
|
|
429
|
-
isSelectedFirstNode = true
|
|
430
|
-
|
|
431
431
|
}, {
|
|
432
432
|
// 立即执行
|
|
433
433
|
immediate: true,
|