bi-element-ui 0.1.80 → 0.1.81

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.
Files changed (8) hide show
  1. package/lib/bi-element-ui.common.js +76097 -76095
  2. package/lib/bi-element-ui.css +1 -1
  3. package/lib/bi-element-ui.umd.js +76097 -76095
  4. package/lib/bi-element-ui.umd.min.js +49 -49
  5. package/package.json +2 -3
  6. package/pnpm-lock.yaml +2574 -2574
  7. package/src/table.js +8 -0
  8. package/src/views/Home.vue +147 -25
package/src/table.js CHANGED
@@ -3,6 +3,14 @@ import EditBtn from './components/EditBtn'
3
3
  export default {
4
4
  data() {
5
5
  return {
6
+ moreButton: [
7
+ {
8
+ name: 'text'
9
+ },
10
+ {
11
+ name: 'text2'
12
+ }
13
+ ],
6
14
  defaultColumnList: [
7
15
  {
8
16
  content: '分组1',
package/src/views/Home.vue CHANGED
@@ -1,5 +1,11 @@
1
1
  <template>
2
2
  <div class="bi-table">
3
+
4
+ <BiMoreButton
5
+ button-text="more"
6
+ :button="moreButton"
7
+ ></BiMoreButton>
8
+
3
9
  <div class="example-table-box">
4
10
  <p>基础表格</p>
5
11
  <!-- <BiCustomColumn
@@ -13,19 +19,41 @@
13
19
  }"
14
20
  @handleTableColumn="setTableColumn"
15
21
  /> -->
16
- <bi-table :loading="tableLoading" border stripe :data="data" pagination :column="basicColumn" :total="100" :auto-scroll="false" :page.sync="listQuery.page" :limit.sync="listQuery.limit"></bi-table>
22
+ <bi-table
23
+ :loading="tableLoading"
24
+ border
25
+ stripe
26
+ :data="data"
27
+ pagination
28
+ :column="basicColumn"
29
+ :total="100"
30
+ :auto-scroll="false"
31
+ :page.sync="listQuery.page"
32
+ :limit.sync="listQuery.limit"
33
+ ></bi-table>
17
34
  </div>
18
35
 
19
36
  <div class="example-table-box">
20
37
  <p>支持render渲染</p>
21
- <bi-table border :data="data" :column="renderColumn"></bi-table>
38
+ <bi-table
39
+ border
40
+ :data="data"
41
+ :column="renderColumn"
42
+ ></bi-table>
22
43
  </div>
23
44
 
24
45
  <div class="example-table-box">
25
46
  <p>支持slot插槽</p>
26
- <bi-table border :data="data" :column="slotColumn">
47
+ <bi-table
48
+ border
49
+ :data="data"
50
+ :column="slotColumn"
51
+ >
27
52
  <template v-slot:zip="{ row }">
28
- <el-tag class="el-icon-message-solid" type="success">
53
+ <el-tag
54
+ class="el-icon-message-solid"
55
+ type="success"
56
+ >
29
57
  {{ row.zip }}
30
58
  </el-tag>
31
59
  </template>
@@ -34,32 +62,78 @@
34
62
 
35
63
  <div class="example-table-box">
36
64
  <p>支持组件引入</p>
37
- <bi-table border :data="data" :column="componentColumn"></bi-table>
65
+ <bi-table
66
+ border
67
+ :data="data"
68
+ :column="componentColumn"
69
+ ></bi-table>
38
70
  </div>
39
71
 
40
72
  <div class="example-table-box">
41
73
  <p>支持树形数据</p>
42
- <bi-table border :data="data" :column="componentColumn" default-expand-all row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"></bi-table>
74
+ <bi-table
75
+ border
76
+ :data="data"
77
+ :column="componentColumn"
78
+ default-expand-all
79
+ row-key="id"
80
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
81
+ ></bi-table>
43
82
  </div>
44
83
 
45
84
  <div class="example-table-box">
46
85
  <p>支持selection/index/expand</p>
47
- <bi-table border :data="data" :column="typesColumn"></bi-table>
86
+ <bi-table
87
+ border
88
+ :data="data"
89
+ :column="typesColumn"
90
+ ></bi-table>
48
91
  </div>
49
92
 
50
93
  <div class="example-table-box">
51
94
  <p>带分页功能</p>
52
- <bi-table border :data="data" :column="complexColumn" :columns-props="columnsProps" pagination :auto-scroll="false" :total="100" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @selection-change="selectionChange" @pagination="getList"> </bi-table>
95
+ <bi-table
96
+ border
97
+ :data="data"
98
+ :column="complexColumn"
99
+ :columns-props="columnsProps"
100
+ pagination
101
+ :auto-scroll="false"
102
+ :total="100"
103
+ :page.sync="listQuery.page"
104
+ :limit.sync="listQuery.limit"
105
+ @selection-change="selectionChange"
106
+ @pagination="getList"
107
+ > </bi-table>
53
108
 
54
- <el-dialog title="收货地址" :visible.sync="dialogVisible">
55
- <el-form :model="editForm" label-width="100px">
109
+ <el-dialog
110
+ title="收货地址"
111
+ :visible.sync="dialogVisible"
112
+ >
113
+ <el-form
114
+ :model="editForm"
115
+ label-width="100px"
116
+ >
56
117
  <el-form-item label="名称">
57
- <el-input v-model="editForm.name" autocomplete="off"></el-input>
118
+ <el-input
119
+ v-model="editForm.name"
120
+ autocomplete="off"
121
+ ></el-input>
58
122
  </el-form-item>
59
123
  <el-form-item label="区域">
60
- <el-select v-model="editForm.province" placeholder="请选择区域" style="width: 100%">
61
- <el-option label="上海" value="shanghai"></el-option>
62
- <el-option label="北京" value="beijing"></el-option>
124
+ <el-select
125
+ v-model="editForm.province"
126
+ placeholder="请选择区域"
127
+ style="width: 100%"
128
+ >
129
+ <el-option
130
+ label="上海"
131
+ value="shanghai"
132
+ ></el-option>
133
+ <el-option
134
+ label="北京"
135
+ value="beijing"
136
+ ></el-option>
63
137
  </el-select>
64
138
  </el-form-item>
65
139
  <el-form-item label="市区">
@@ -69,21 +143,48 @@
69
143
  <el-input v-model="editForm.address"></el-input>
70
144
  </el-form-item>
71
145
  </el-form>
72
- <div slot="footer" class="dialog-footer">
146
+ <div
147
+ slot="footer"
148
+ class="dialog-footer"
149
+ >
73
150
  <el-button @click="dialogVisible = false">取 消</el-button>
74
- <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
151
+ <el-button
152
+ type="primary"
153
+ @click="dialogVisible = false"
154
+ >确 定</el-button>
75
155
  </div>
76
156
  </el-dialog>
77
157
  </div>
78
158
 
79
159
  <div class="example-table-box">
80
160
  <p>sticky表格</p>
81
- <bi-table border stripe fixed="sticky" :data="data" :column="fullscreenColumn"></bi-table>
161
+ <bi-table
162
+ border
163
+ stripe
164
+ fixed="sticky"
165
+ :data="data"
166
+ :column="fullscreenColumn"
167
+ ></bi-table>
82
168
  </div>
83
169
 
84
170
  <div class="example-table-box">
85
171
  <p>普通固定表头</p>
86
- <bi-table border stripe fixed="fullscreen" :data="data" :column="fullscreenColumn" max-height="200px" fixed-offset="60" pagination :auto-scroll="false" :total="100" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @selection-change="selectionChange" @pagination="getList"></bi-table>
172
+ <bi-table
173
+ border
174
+ stripe
175
+ fixed="fullscreen"
176
+ :data="data"
177
+ :column="fullscreenColumn"
178
+ max-height="200px"
179
+ fixed-offset="60"
180
+ pagination
181
+ :auto-scroll="false"
182
+ :total="100"
183
+ :page.sync="listQuery.page"
184
+ :limit.sync="listQuery.limit"
185
+ @selection-change="selectionChange"
186
+ @pagination="getList"
187
+ ></bi-table>
87
188
  </div>
88
189
 
89
190
  <div class="example-table-box">
@@ -91,24 +192,45 @@
91
192
  <el-tabs>
92
193
  <el-tab-pane label="tabs">
93
194
  <div style="height: 300px; background: #eee"></div>
94
- <bi-table border stripe fixed="sticky" :data="data" :column="fullscreenColumn" :summary-method="getSummaries" show-summary></bi-table>
195
+ <bi-table
196
+ border
197
+ stripe
198
+ fixed="sticky"
199
+ :data="data"
200
+ :column="fullscreenColumn"
201
+ :summary-method="getSummaries"
202
+ show-summary
203
+ ></bi-table>
95
204
  </el-tab-pane>
96
205
  </el-tabs>
97
206
  </div>
98
207
  <div class="example-table-box">
99
208
  <p>tooltipIcon在表格内的组件使用</p>
100
- <bi-table border stripe fixed="sticky" :data="minData" :column="renderColumn">
209
+ <bi-table
210
+ border
211
+ stripe
212
+ fixed="sticky"
213
+ :data="minData"
214
+ :column="renderColumn"
215
+ >
101
216
  <template v-slot:province="{ row }">
102
- <BiTooltipIcon :label="row.province" content="这是props继承的写法,<br/>可根据不同需求配置属性" placement="right" icon="el-icon-warning-outline" effect="light"></BiTooltipIcon>
217
+ <BiTooltipIcon
218
+ :label="row.province"
219
+ content="这是props继承的写法,<br/>可根据不同需求配置属性"
220
+ placement="right"
221
+ icon="el-icon-warning-outline"
222
+ effect="light"
223
+ ></BiTooltipIcon>
103
224
  </template>
104
225
  <template v-slot:city="{ row }">
105
226
  <BiTooltipIcon placement="right">
106
- <template slot="tip-label"
107
- ><span>{{ row.city }}</span></template
108
- >
227
+ <template slot="tip-label"><span>{{ row.city }}</span></template>
109
228
  <template slot="tip-content"><span>这是slot默认替换的写法,可用自定义的内容配合tooltip使用</span></template>
110
229
  <template slot="tip-icon">
111
- <i class="el-icon-chat-dot-round" style="color: #ff6700"></i>
230
+ <i
231
+ class="el-icon-chat-dot-round"
232
+ style="color: #ff6700"
233
+ ></i>
112
234
  </template>
113
235
  </BiTooltipIcon>
114
236
  </template>