bi-element-ui 1.0.11 → 1.1.1
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 +136952 -78551
- package/lib/bi-element-ui.css +22 -1
- package/lib/bi-element-ui.umd.js +136952 -78551
- package/lib/bi-element-ui.umd.min.js +193 -119
- package/package.json +5 -2
- package/pnpm-lock.yaml +331 -32
- package/src/components/BiTableColumn/index.vue +101 -34
- package/src/main.js +1 -1
- package/src/views/Home.vue +24 -4
- package/src/views/Table.vue +0 -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>
|
|
@@ -174,7 +252,6 @@ export default {
|
|
|
174
252
|
}
|
|
175
253
|
},
|
|
176
254
|
mounted() {
|
|
177
|
-
// console.log(this.tableColumn)
|
|
178
255
|
const params = {
|
|
179
256
|
type: this.listType
|
|
180
257
|
}
|
|
@@ -182,22 +259,15 @@ export default {
|
|
|
182
259
|
this.getList(params)
|
|
183
260
|
this.returnColumn()
|
|
184
261
|
},
|
|
185
|
-
// created() {
|
|
186
|
-
// this.list = this.colList
|
|
187
|
-
// },
|
|
188
262
|
beforeDestroy() {
|
|
189
263
|
this.visible = false
|
|
190
264
|
},
|
|
191
265
|
methods: {
|
|
192
266
|
// 获取列表
|
|
193
267
|
defaultColumnInit() {
|
|
194
|
-
// console.log('defaultColumnInit')
|
|
195
268
|
const localData = this.getLocalStorage()
|
|
196
269
|
const { left, center, right } = localData || this.defaultColumn
|
|
197
270
|
|
|
198
|
-
// this.leftColumnList = []
|
|
199
|
-
// this.columnList = []
|
|
200
|
-
// this.rightColumnList = []
|
|
201
271
|
left.map((prop) => {
|
|
202
272
|
this.checkList.push(prop)
|
|
203
273
|
const column = this.tableColumnList.find((item) => item.prop === prop)
|
|
@@ -213,11 +283,8 @@ export default {
|
|
|
213
283
|
const column = this.tableColumnList.find((item) => item.prop === prop)
|
|
214
284
|
column && this.rightColumnList.push(column)
|
|
215
285
|
})
|
|
216
|
-
// console.log(this.checkList)
|
|
217
286
|
},
|
|
218
287
|
async getList(params) {
|
|
219
|
-
// const res = await getTheadList(params)
|
|
220
|
-
// if (res.status_code === 1) {
|
|
221
288
|
this.colList = [
|
|
222
289
|
{
|
|
223
290
|
content: '分组1',
|
package/src/main.js
CHANGED
package/src/views/Home.vue
CHANGED
|
@@ -27,13 +27,22 @@
|
|
|
27
27
|
stripe
|
|
28
28
|
:data="data"
|
|
29
29
|
pagination
|
|
30
|
+
:sticky-top="0"
|
|
30
31
|
:column="basicColumn"
|
|
31
32
|
:total="100"
|
|
32
33
|
show-summary
|
|
33
34
|
:auto-scroll="false"
|
|
34
35
|
:page.sync="listQuery.page"
|
|
35
36
|
:limit.sync="listQuery.limit"
|
|
36
|
-
|
|
37
|
+
>
|
|
38
|
+
<template v-slot:province="{ row }">
|
|
39
|
+
{{ row.province }}
|
|
40
|
+
</template>
|
|
41
|
+
<template v-slot:city_header>
|
|
42
|
+
<span>市区</span>
|
|
43
|
+
</template>
|
|
44
|
+
|
|
45
|
+
</bi-table>
|
|
37
46
|
</div>
|
|
38
47
|
|
|
39
48
|
<div v-if="false">
|
|
@@ -266,6 +275,7 @@ import TableData from '@/table.js'
|
|
|
266
275
|
// import BiTableColumn from '@/components/BiTableColumn'
|
|
267
276
|
import BiTooltipIcon from '@/components/BiTooltipIcon'
|
|
268
277
|
export default {
|
|
278
|
+
name: 'HomePage',
|
|
269
279
|
components: {
|
|
270
280
|
BiTooltipIcon
|
|
271
281
|
// BiTable
|
|
@@ -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 },
|
package/src/views/Table.vue
CHANGED
|
@@ -280,15 +280,11 @@
|
|
|
280
280
|
</template>
|
|
281
281
|
|
|
282
282
|
<script>
|
|
283
|
-
// import CryptoJS from 'crypto-js/md5'
|
|
284
283
|
import TableData from '@/table.js'
|
|
285
|
-
import BiTableColumn from '@/components/BiTableColumn'
|
|
286
284
|
import BiTooltipIcon from '@/components/BiTooltipIcon'
|
|
287
285
|
export default {
|
|
288
286
|
components: {
|
|
289
287
|
BiTooltipIcon
|
|
290
|
-
// BiTableColumn
|
|
291
|
-
// BiTable
|
|
292
288
|
},
|
|
293
289
|
mixins: [TableData],
|
|
294
290
|
data() {
|