🌐 AI搜索 & 代理 主页
Skip to content

Commit fa977a8

Browse files
jacobmllr95jacobmllr95
authored
fix(b-table): allow responsive and stacked props together (#6266)
1 parent 79784ae commit fa977a8

File tree

4 files changed

+56
-35
lines changed

4 files changed

+56
-35
lines changed

‎src/components/table/README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -349,8 +349,8 @@ details.
349349
| `no-footer-sorting` | Boolean | When `foot-clone` is true and the table is sortable, disables the sorting icons and click behaviour on the footer heading cells. Refer to the [Sorting](#sorting) section below for more details. |
350350
| `no-border-collapse` | Boolean | Disables the default of collapsing of the table borders. Mainly for use with [sticky headers](#sticky-headers) and/or [sticky columns](#sticky-columns). Will cause the appearance of double borders in some situations. |
351351

352-
**Note:** table style options `fixed`, `stacked`, `caption-top`, `no-border-collapse`, sticky
353-
headers, sticky columns, and the table sorting feature, all require BootstrapVue's custom CSS.
352+
**Note:** The table style options `fixed`, `stacked`, `caption-top`, `no-border-collapse`, sticky
353+
headers, sticky columns and the table sorting feature, all require BootstrapVue's custom CSS.
354354

355355
**Example: Basic table styles**
356356

@@ -609,8 +609,8 @@ breakpoint values `'sm'`, `'md'`, `'lg'`, or `'xl'`.
609609
Column header labels will be rendered to the left of each field value using a CSS `::before` pseudo
610610
element, with a width of 40%.
611611

612-
The prop `stacked` takes precedence over the `responsive` prop, [`sticky-header`](#sticky-headers)
613-
props, and the [`stickyColumn`](#sticky-columns) field definition property.
612+
The `stacked` prop takes precedence over the [`sticky-header`](#sticky-headers) prop and the
613+
[`stickyColumn`](#sticky-columns) field definition property.
614614

615615
**Example: Always stacked table**
616616

@@ -1402,8 +1402,8 @@ set.
14021402
wrapped inside a horizontally scrollable `<div>`.
14031403
- When you have multiple columns that are set as `stickyColumn`, the columns will stack over each
14041404
other visually, and the left-most sticky columns may "peek" out from under the next sticky column.
1405-
To get around this behaviour, make sure your latter stickyColumns are the same width or wider than
1406-
previous sticky columns.
1405+
To get around this behaviour, make sure your latter sticky columns are the same width or wider
1406+
than previous sticky columns.
14071407
- Bootstrap v4 uses the CSS style `border-collapse: collapsed` on table elements. This prevents any
14081408
borders on the sticky columns from "sticking" to the column, and hence those borders will scroll
14091409
when the body scrolls. To get around this issue, set the prop `no-border-collapse` on the table

‎src/components/table/helpers/mixin-table-renderer.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,8 @@ export const tableRendererMixin = Vue.extend({
5151
computed: {
5252
// Layout related computed props
5353
isResponsive() {
54-
let { responsive } = this
55-
responsive = responsive === '' ? true : responsive
56-
return this.isStacked ? false : responsive
54+
const { responsive } = this
55+
return responsive === '' ? true : responsive
5756
},
5857
isStickyHeader() {
5958
let { stickyHeader } = this

‎src/components/table/table-lite.spec.js‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -225,9 +225,12 @@ describe('table-lite', () => {
225225
expect(wrapper.element.tagName).toBe('DIV')
226226
expect(wrapper.classes()).toContain('table-responsive')
227227
expect(wrapper.classes().length).toBe(1)
228-
expect(wrapper.find('table').classes()).toContain('table')
229-
expect(wrapper.find('table').classes()).toContain('b-table')
230-
expect(wrapper.find('table').classes().length).toBe(2)
228+
229+
const $table = wrapper.find('table')
230+
expect($table.exists()).toBe(true)
231+
expect($table.classes()).toContain('table')
232+
expect($table.classes()).toContain('b-table')
233+
expect($table.classes().length).toBe(2)
231234

232235
wrapper.destroy()
233236
})
@@ -245,14 +248,17 @@ describe('table-lite', () => {
245248
expect(wrapper.element.tagName).toBe('DIV')
246249
expect(wrapper.classes()).toContain('table-responsive-md')
247250
expect(wrapper.classes().length).toBe(1)
248-
expect(wrapper.find('table').classes()).toContain('table')
249-
expect(wrapper.find('table').classes()).toContain('b-table')
250-
expect(wrapper.find('table').classes().length).toBe(2)
251+
252+
const $table = wrapper.find('table')
253+
expect($table.exists()).toBe(true)
254+
expect($table.classes()).toContain('table')
255+
expect($table.classes()).toContain('b-table')
256+
expect($table.classes().length).toBe(2)
251257

252258
wrapper.destroy()
253259
})
254260

255-
it('stacked has precedence over responsive', async () => {
261+
it('stacked and responsive work together', async () => {
256262
const wrapper = mount(BTableLite, {
257263
propsData: {
258264
items: items1,
@@ -263,12 +269,16 @@ describe('table-lite', () => {
263269
})
264270

265271
expect(wrapper).toBeDefined()
266-
expect(wrapper.element.tagName).toBe('TABLE')
267-
expect(wrapper.classes()).not.toContain('table-responsive')
268-
expect(wrapper.classes()).toContain('b-table-stacked')
269-
expect(wrapper.classes()).toContain('table')
270-
expect(wrapper.classes()).toContain('b-table')
271-
expect(wrapper.classes().length).toBe(3)
272+
expect(wrapper.element.tagName).toBe('DIV')
273+
expect(wrapper.classes()).toContain('table-responsive')
274+
expect(wrapper.classes().length).toBe(1)
275+
276+
const $table = wrapper.find('table')
277+
expect($table.exists()).toBe(true)
278+
expect($table.classes()).toContain('table')
279+
expect($table.classes()).toContain('b-table')
280+
expect($table.classes()).toContain('b-table-stacked')
281+
expect($table.classes().length).toBe(3)
272282

273283
wrapper.destroy()
274284
})
@@ -281,6 +291,7 @@ describe('table-lite', () => {
281291
stacked: true
282292
}
283293
})
294+
284295
expect(wrapper).toBeDefined()
285296
expect(wrapper.findAll('tbody > tr').length).toBe(2)
286297
const $trs = wrapper.findAll('tbody > tr').wrappers

‎src/components/table/table.spec.js‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -286,9 +286,12 @@ describe('table', () => {
286286
expect(wrapper.element.tagName).toBe('DIV')
287287
expect(wrapper.classes()).toContain('table-responsive')
288288
expect(wrapper.classes().length).toBe(1)
289-
expect(wrapper.find('table').classes()).toContain('table')
290-
expect(wrapper.find('table').classes()).toContain('b-table')
291-
expect(wrapper.find('table').classes().length).toBe(2)
289+
290+
const $table = wrapper.find('table')
291+
expect($table.exists()).toBe(true)
292+
expect($table.classes()).toContain('table')
293+
expect($table.classes()).toContain('b-table')
294+
expect($table.classes().length).toBe(2)
292295

293296
wrapper.destroy()
294297
})
@@ -306,14 +309,17 @@ describe('table', () => {
306309
expect(wrapper.element.tagName).toBe('DIV')
307310
expect(wrapper.classes()).toContain('table-responsive-md')
308311
expect(wrapper.classes().length).toBe(1)
309-
expect(wrapper.find('table').classes()).toContain('table')
310-
expect(wrapper.find('table').classes()).toContain('b-table')
311-
expect(wrapper.find('table').classes().length).toBe(2)
312+
313+
const $table = wrapper.find('table')
314+
expect($table.exists()).toBe(true)
315+
expect($table.classes()).toContain('table')
316+
expect($table.classes()).toContain('b-table')
317+
expect($table.classes().length).toBe(2)
312318

313319
wrapper.destroy()
314320
})
315321

316-
it('stacked has precedence over responsive', async () => {
322+
it('stacked and responsive work together', async () => {
317323
const wrapper = mount(BTable, {
318324
propsData: {
319325
items: items1,
@@ -324,12 +330,16 @@ describe('table', () => {
324330
})
325331

326332
expect(wrapper).toBeDefined()
327-
expect(wrapper.element.tagName).toBe('TABLE')
328-
expect(wrapper.classes()).not.toContain('table-responsive')
329-
expect(wrapper.classes()).toContain('b-table-stacked')
330-
expect(wrapper.classes()).toContain('table')
331-
expect(wrapper.classes()).toContain('b-table')
332-
expect(wrapper.classes().length).toBe(3)
333+
expect(wrapper.element.tagName).toBe('DIV')
334+
expect(wrapper.classes()).toContain('table-responsive')
335+
expect(wrapper.classes().length).toBe(1)
336+
337+
const $table = wrapper.find('table')
338+
expect($table.exists()).toBe(true)
339+
expect($table.classes()).toContain('table')
340+
expect($table.classes()).toContain('b-table')
341+
expect($table.classes()).toContain('b-table-stacked')
342+
expect($table.classes().length).toBe(3)
333343

334344
wrapper.destroy()
335345
})
@@ -342,6 +352,7 @@ describe('table', () => {
342352
stacked: true
343353
}
344354
})
355+
345356
expect(wrapper).toBeDefined()
346357
expect(wrapper.findAll('tbody > tr').length).toBe(2)
347358
const $trs = wrapper.findAll('tbody > tr').wrappers

0 commit comments

Comments
 (0)