bi-element-ui 1.0.10 → 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/dist/css/about.f927ac1d.css +1 -0
- package/dist/css/chunk-vendors.bce393fb.css +1 -0
- package/dist/css/index.9da9fdde.css +1 -0
- package/dist/fonts/bi-icons.08e72b48.woff +0 -0
- package/dist/fonts/bi-icons.8d6ee7b5.ttf +0 -0
- package/dist/index.html +1 -1
- package/dist/js/about.49a721d0.js +2 -0
- package/dist/js/chunk-vendors.008a0caf.js +313 -0
- package/dist/js/index.e9532c02.js +11 -0
- package/lib/bi-element-ui.common.js +139943 -81420
- package/lib/bi-element-ui.css +22 -1
- package/lib/bi-element-ui.umd.js +139943 -81420
- package/lib/bi-element-ui.umd.min.js +188 -114
- package/package.json +5 -2
- package/pnpm-lock.yaml +331 -32
- package/src/App.vue +1 -1
- package/src/components/BiTableColumn/index.vue +101 -23
- package/src/main.js +2 -1
- package/src/style/index.scss +5 -0
- package/src/views/Home.vue +27 -4
- package/dist/css/about.2d631297.css +0 -1
- package/dist/css/chunk-vendors.c8eeae46.css +0 -1
- package/dist/css/index.50dcfdeb.css +0 -1791
- package/dist/js/about.d71b6783.js +0 -2
- package/dist/js/chunk-vendors.dbcc1d6f.js +0 -313
- package/dist/js/index.af27f41b.js +0 -11
package/src/App.vue
CHANGED
|
@@ -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
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import Vue from 'vue'
|
|
2
2
|
import ElementUI from 'bi-eleme'
|
|
3
3
|
import 'bi-eleme/lib/theme-chalk/index.css'
|
|
4
|
+
import './style/index.scss'
|
|
4
5
|
import App from './App.vue'
|
|
5
6
|
import router from './router'
|
|
6
7
|
import store from './store'
|
|
@@ -10,7 +11,7 @@ Vue.use(ElementUI)
|
|
|
10
11
|
Vue.use(BiUi, {
|
|
11
12
|
dev: process.env.NODE_ENV !== 'production',
|
|
12
13
|
env: process.env.NODE_ENV,
|
|
13
|
-
system: '
|
|
14
|
+
system: 'pigeon'
|
|
14
15
|
})
|
|
15
16
|
|
|
16
17
|
Vue.config.productionTip = false
|
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
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.example-table-box[data-v-49a6bb0c]{margin:25px 50px}.example-table-box p[data-v-49a6bb0c]{text-align:left;font-weight:700}.box[data-v-f24ce6bc]{background:#ccc;height:200px;padding:10px 50px}header[data-v-f24ce6bc]{height:50px;background:#fff}.example-table-box[data-v-3589ac10]{margin:25px 50px;position:relative}.example-table-box p[data-v-3589ac10]{text-align:left;font-weight:700}
|