bi-element-ui 1.0.11 → 1.1.0
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/.prettierignore +1 -1
- package/lib/bi-element-ui.common.js +139086 -80579
- package/lib/bi-element-ui.css +22 -1
- package/lib/bi-element-ui.umd.js +139086 -80579
- package/lib/bi-element-ui.umd.min.js +188 -114
- package/package.json +5 -2
- package/pnpm-lock.yaml +331 -32
- package/src/components/BiTableColumn/index.vue +101 -23
- package/src/main.js +1 -1
- package/src/views/Home.vue +27 -4
|
@@ -1,15 +1,37 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<el-button
|
|
2
|
+
<el-button
|
|
3
|
+
type="primary"
|
|
4
|
+
@click="visible = true"
|
|
5
|
+
>
|
|
3
6
|
自定义列
|
|
4
|
-
<el-dialog
|
|
5
|
-
|
|
7
|
+
<el-dialog
|
|
8
|
+
custom-class="bi-column-dialog"
|
|
9
|
+
title="自定义列"
|
|
10
|
+
:visible.sync="visible"
|
|
11
|
+
width="800px"
|
|
12
|
+
top="8vh"
|
|
13
|
+
append-to-body
|
|
14
|
+
@open="handleOpen"
|
|
15
|
+
@close="close"
|
|
16
|
+
>
|
|
17
|
+
<div
|
|
18
|
+
class="dialog-body"
|
|
19
|
+
style="min-height: 160px"
|
|
20
|
+
>
|
|
6
21
|
<div class="bi-column-container">
|
|
7
22
|
<div class="checkbox-container">
|
|
8
23
|
<el-card class="box-card">
|
|
9
|
-
<div
|
|
24
|
+
<div
|
|
25
|
+
slot="header"
|
|
26
|
+
class="clearfix"
|
|
27
|
+
>
|
|
10
28
|
<span>可操作性的列</span>
|
|
11
29
|
</div>
|
|
12
|
-
<div
|
|
30
|
+
<div
|
|
31
|
+
v-for="(item, index) in colList"
|
|
32
|
+
:key="index"
|
|
33
|
+
class="checkbox-group"
|
|
34
|
+
>
|
|
13
35
|
<p class="checkbox-title">
|
|
14
36
|
<el-checkbox
|
|
15
37
|
v-model="item.status"
|
|
@@ -18,12 +40,21 @@
|
|
|
18
40
|
return handleCheckGroupAllChange(val, item)
|
|
19
41
|
}
|
|
20
42
|
"
|
|
21
|
-
|
|
22
|
-
>
|
|
43
|
+
>{{ item.content }}</el-checkbox>
|
|
23
44
|
</p>
|
|
24
45
|
<p>
|
|
25
|
-
<el-checkbox-group
|
|
26
|
-
|
|
46
|
+
<el-checkbox-group
|
|
47
|
+
v-model="checkList"
|
|
48
|
+
:true-label="1"
|
|
49
|
+
:false-label="0"
|
|
50
|
+
@change="handleCheckGroupAll(item)"
|
|
51
|
+
>
|
|
52
|
+
<el-checkbox
|
|
53
|
+
v-for="(city, cityIndex) in item.children"
|
|
54
|
+
:key="cityIndex"
|
|
55
|
+
:label="city.name"
|
|
56
|
+
style="width: 120px; margin: 0 15px 15px 0"
|
|
57
|
+
>
|
|
27
58
|
{{ city.content }}
|
|
28
59
|
</el-checkbox>
|
|
29
60
|
</el-checkbox-group>
|
|
@@ -33,18 +64,34 @@
|
|
|
33
64
|
</div>
|
|
34
65
|
<div class="column-container">
|
|
35
66
|
<el-card class="box-card">
|
|
36
|
-
<div
|
|
67
|
+
<div
|
|
68
|
+
slot="header"
|
|
69
|
+
class="column-title"
|
|
70
|
+
>
|
|
37
71
|
<span>已选{{ columnLength }}列</span>
|
|
38
|
-
<el-button
|
|
72
|
+
<el-button
|
|
73
|
+
type="text"
|
|
74
|
+
@click="clearAll"
|
|
75
|
+
>清空全部</el-button>
|
|
39
76
|
</div>
|
|
40
77
|
<p class="column-group-title">左侧固定列</p>
|
|
41
78
|
<div class="column-configurable">
|
|
42
|
-
<draggable
|
|
79
|
+
<draggable
|
|
80
|
+
v-model="leftColumnList"
|
|
81
|
+
group="column"
|
|
82
|
+
>
|
|
43
83
|
<!-- <transition-group> -->
|
|
44
|
-
<div
|
|
84
|
+
<div
|
|
85
|
+
v-for="column in leftColumnList"
|
|
86
|
+
:key="column.prop"
|
|
87
|
+
class="selected-column-item"
|
|
88
|
+
>
|
|
45
89
|
<i class="el-icon-menu"></i>
|
|
46
90
|
<div class="column-name">{{ column.content || column.label }}</div>
|
|
47
|
-
<i
|
|
91
|
+
<i
|
|
92
|
+
class="el-icon-close column-close"
|
|
93
|
+
@click="closeColumn(column.prop)"
|
|
94
|
+
></i>
|
|
48
95
|
</div>
|
|
49
96
|
<!-- </transition-group> -->
|
|
50
97
|
</draggable>
|
|
@@ -52,12 +99,22 @@
|
|
|
52
99
|
|
|
53
100
|
<p class="column-group-title">中间不固定列</p>
|
|
54
101
|
<div class="column-configurable">
|
|
55
|
-
<draggable
|
|
102
|
+
<draggable
|
|
103
|
+
v-model="columnList"
|
|
104
|
+
group="column"
|
|
105
|
+
>
|
|
56
106
|
<!-- <transition-group> -->
|
|
57
|
-
<div
|
|
107
|
+
<div
|
|
108
|
+
v-for="column in columnList"
|
|
109
|
+
:key="column.prop"
|
|
110
|
+
class="selected-column-item"
|
|
111
|
+
>
|
|
58
112
|
<i class="el-icon-menu"></i>
|
|
59
113
|
<div class="column-name">{{ column.content || column.label }}</div>
|
|
60
|
-
<i
|
|
114
|
+
<i
|
|
115
|
+
class="el-icon-close column-close"
|
|
116
|
+
@click="closeColumn(column.prop)"
|
|
117
|
+
></i>
|
|
61
118
|
</div>
|
|
62
119
|
<!-- </transition-group> -->
|
|
63
120
|
</draggable>
|
|
@@ -65,12 +122,22 @@
|
|
|
65
122
|
|
|
66
123
|
<p class="column-group-title">右侧固定列</p>
|
|
67
124
|
<div class="column-configurable">
|
|
68
|
-
<draggable
|
|
125
|
+
<draggable
|
|
126
|
+
v-model="rightColumnList"
|
|
127
|
+
group="column"
|
|
128
|
+
>
|
|
69
129
|
<!-- <transition-group> -->
|
|
70
|
-
<div
|
|
130
|
+
<div
|
|
131
|
+
v-for="column in rightColumnList"
|
|
132
|
+
:key="column.prop"
|
|
133
|
+
class="selected-column-item"
|
|
134
|
+
>
|
|
71
135
|
<i class="el-icon-menu"></i>
|
|
72
136
|
<div class="column-name">{{ column.content || column.label }}</div>
|
|
73
|
-
<i
|
|
137
|
+
<i
|
|
138
|
+
class="el-icon-close column-close"
|
|
139
|
+
@click="closeColumn(column.prop)"
|
|
140
|
+
></i>
|
|
74
141
|
</div>
|
|
75
142
|
<!-- </transition-group> -->
|
|
76
143
|
</draggable>
|
|
@@ -79,13 +146,24 @@
|
|
|
79
146
|
</div>
|
|
80
147
|
</div>
|
|
81
148
|
</div>
|
|
82
|
-
<span
|
|
149
|
+
<span
|
|
150
|
+
slot="footer"
|
|
151
|
+
class="dialog-footer"
|
|
152
|
+
style="display: flex; justify-content: space-between"
|
|
153
|
+
>
|
|
83
154
|
<span style="display: inline-block; line-height: 32px">
|
|
84
|
-
<el-checkbox
|
|
155
|
+
<el-checkbox
|
|
156
|
+
v-model="checkAllData"
|
|
157
|
+
label="全选"
|
|
158
|
+
@change="checkAll"
|
|
159
|
+
> 全选 </el-checkbox>
|
|
85
160
|
</span>
|
|
86
161
|
<div>
|
|
87
162
|
<el-button @click="close">关闭</el-button>
|
|
88
|
-
<el-button
|
|
163
|
+
<el-button
|
|
164
|
+
type="primary"
|
|
165
|
+
@click="ok"
|
|
166
|
+
>生效</el-button>
|
|
89
167
|
</div>
|
|
90
168
|
</span>
|
|
91
169
|
</el-dialog>
|
package/src/main.js
CHANGED
package/src/views/Home.vue
CHANGED
|
@@ -27,13 +27,23 @@
|
|
|
27
27
|
stripe
|
|
28
28
|
:data="data"
|
|
29
29
|
pagination
|
|
30
|
+
:sticky-top="0"
|
|
31
|
+
header-popper-type="test2"
|
|
30
32
|
:column="basicColumn"
|
|
31
33
|
:total="100"
|
|
32
34
|
show-summary
|
|
33
35
|
:auto-scroll="false"
|
|
34
36
|
:page.sync="listQuery.page"
|
|
35
37
|
:limit.sync="listQuery.limit"
|
|
36
|
-
|
|
38
|
+
>
|
|
39
|
+
<template v-slot:province="{ row }">
|
|
40
|
+
{{ row.province }}
|
|
41
|
+
</template>
|
|
42
|
+
<template v-slot:city_header>
|
|
43
|
+
<span>市区</span>
|
|
44
|
+
</template>
|
|
45
|
+
|
|
46
|
+
</bi-table>
|
|
37
47
|
</div>
|
|
38
48
|
|
|
39
49
|
<div v-if="false">
|
|
@@ -277,9 +287,19 @@ export default {
|
|
|
277
287
|
loadingData: [],
|
|
278
288
|
basicColumn: [
|
|
279
289
|
{ label: '日期', prop: 'date', sortable: true, fixed: true },
|
|
280
|
-
{
|
|
281
|
-
|
|
282
|
-
|
|
290
|
+
{
|
|
291
|
+
label: '姓名',
|
|
292
|
+
prop: 'name',
|
|
293
|
+
renderHeader: (h) => {
|
|
294
|
+
return <span>姓名(12)</span>
|
|
295
|
+
}
|
|
296
|
+
},
|
|
297
|
+
{ label: '省份2', prop: 'province', slotScope: true },
|
|
298
|
+
{
|
|
299
|
+
label: '市区',
|
|
300
|
+
prop: 'city',
|
|
301
|
+
slotScopeHeader: true
|
|
302
|
+
},
|
|
283
303
|
{ label: '地址', prop: 'address', width: 300 },
|
|
284
304
|
{ label: '地址2', prop: 'address2', width: 300 },
|
|
285
305
|
{ label: '地址地址地址地址', prop: 'zip', width: 80 },
|
|
@@ -341,6 +361,9 @@ export default {
|
|
|
341
361
|
|
|
342
362
|
getSummaries() {
|
|
343
363
|
return ['合计', '2016-05-03', '王小虎', '上海', '普陀区', '上海市普陀区金沙江路 1518 弄', '上海市普陀区金沙江路 1518 弄', 200333]
|
|
364
|
+
},
|
|
365
|
+
handleHeaderClick(column, event) {
|
|
366
|
+
console.log('🚀 ~ handleHeaderClick ~ column, event:', column, event)
|
|
344
367
|
}
|
|
345
368
|
}
|
|
346
369
|
}
|