Are you an LLM? You can read better optimized documentation at /front/component/ma-pro-table/examples/responsive-layout.md for this page in Markdown format
Responsive Layout β
Demonstrates the responsive behavior of tables across different screen sizes, including mobile adaptation and layout optimization.
Key Features β
- Device Adaptation: Automatically adapts to different devices like desktops, tablets, and mobile phones
- Dynamic Column Management: Dynamically shows/hides columns based on screen size
- Responsive Search: Search form supports responsive layouts
- Operation Optimization: Optimized operation methods for different devices
- Performance Friendly: Avoids displaying excessive information on small-screen devices
Device Breakpoint Configuration β
Standard Breakpoints β
javascript
const deviceConfigs = {
desktop: {
width: 1200,
name: 'Desktop',
type: 'Large Screen',
columns: 8
},
tablet: {
width: 768,
name: 'Tablet',
type: 'Medium Screen',
columns: 5
},
mobile: {
width: 375,
name: 'Mobile',
type: 'Small Screen',
columns: 3
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Responsive Container β
vue
<template>
<div
class="responsive-container"
:class="currentDevice"
:style="{ width: containerWidth + 'px' }"
>
<MaProTable :options="options" :schema="schema" />
</div>
</template>
<style scoped>
.responsive-container {
margin: 0 auto;
border: 2px dashed #e4e7ed;
border-radius: 8px;
overflow-x: auto;
transition: all 0.3s ease;
}
.responsive-container.desktop {
border-color: #409eff;
}
.responsive-container.tablet {
border-color: #e6a23c;
}
.responsive-container.mobile {
border-color: #f56c6c;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Responsive Search β
Search Item Quantity Control β
javascript
// Adjust displayed search items based on device
const updateSearchLayout = (device) => {
const showNumber = device === 'desktop' ? 4 :
device === 'tablet' ? 2 : 1
options.searchOptions = {
showNumber,
layout: device === 'mobile' ? 'vertical' : 'auto'
}
}1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Search Layout Modes β
javascript
const searchOptions = {
showNumber: 3, // Default number of displayed search items
layout: 'auto', // auto/inline/vertical
responsive: {
mobile: {
showNumber: 1,
layout: 'vertical'
},
tablet: {
showNumber: 2,
layout: 'auto'
}
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Responsive Table Columns β
Dynamic Column Display β
javascript
const updateTableColumns = (device) => {
const baseColumns = [
{ label: 'ID', prop: 'id', width: 60 },
{ label: 'Name', prop: 'name', width: 100, fixed: 'left' },
{ label: 'Department', prop: 'department', width: 100 },
{ label: 'Position', prop: 'position', width: 150 },
{ label: 'Salary', prop: 'salary', width: 120 },
{ label: 'Status', prop: 'status', width: 80 },
{ label: 'Join Date', prop: 'createTime', width: 120 }
]
let visibleColumns
if (device === 'mobile') {
// Mobile shows only core information
visibleColumns = [
baseColumns[0], // ID
baseColumns[1], // Name
baseColumns[2], // Department
baseColumns[5], // Status
operationColumn
]
} else if (device === 'tablet') {
// Tablet shows main information
visibleColumns = [
baseColumns[0], // ID
baseColumns[1], // Name
baseColumns[2], // Department
baseColumns[3], // Position
baseColumns[4], // Salary
baseColumns[5], // Status
operationColumn
]
} else {
// Desktop shows all information
visibleColumns = [...baseColumns, operationColumn]
}
schema.tableColumns = visibleColumns
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Column Width Adaptation β
javascript
// Mobile column width optimization
const getColumnWidth = (device, column) => {
if (device === 'mobile') {
return {
id: 50,
name: 80,
department: 90,
status: 70
}[column.prop] || column.width
}
return column.width
}1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Responsive Operations β
Operation Column Adaptation β
javascript
const getOperationConfig = (device) => {
return {
type: device === 'mobile' ? 'dropdown' : 'auto',
width: device === 'mobile' ? 120 :
device === 'tablet' ? 160 : 200,
fold: device === 'mobile' ? 1 :
device === 'tablet' ? 2 : 3,
actions: getDeviceActions(device)
}
}1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Device-Specific Operations β
javascript
const getDeviceActions = (device) => {
const baseActions = [
{
name: 'view',
text: device === 'mobile' ? 'View' : 'Details',
onClick: (data) => {
if (device === 'mobile') {
showMobileDetail(data.row)
} else {
showDesktopDetail(data.row)
}
}
},
{
name: 'edit',
text: 'Edit',
onClick: (data) => {
showEditDialog(data.row, device)
}
}
]
// Desktop shows more operations
if (device === 'desktop') {
baseActions.push(
{
name: 'contact',
text: 'Contact',
onClick: (data) => {
showContactInfo(data.row)
}
},
{
name: 'history',
text: 'History',
onClick: (data) => {
showHistory(data.row)
}
}
)
}
return baseActions
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
Mobile Optimization β
Cell Content Adaptation β
javascript
// Mobile skill tag display optimization
{
label: 'Skills',
prop: 'skills',
cellRender: ({ row }) => (
<div>
{row.skills.slice(0, device === 'mobile' ? 1 : 3).map((skill, index) => (
<el-tag key={index} size="small">
{skill}
</el-tag>
))}
{row.skills.length > (device === 'mobile' ? 1 : 3) && (
<el-tag size="small" type="info">
+{row.skills.length - (device === 'mobile' ? 1 : 3)}
</el-tag>
)}
</div>
)
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Mobile Styles β
css
/* Mobile-specific styles */
.responsive-container.mobile :deep(.ma-pro-table) {
font-size: 14px;
}
.responsive-container.mobile :deep(.el-table th),
.responsive-container.mobile :deep(.el-table td) {
padding: 8px 4px;
}
.responsive-container.mobile :deep(.el-pagination) {
text-align: center;
}
.responsive-container.mobile :deep(.el-tag) {
font-size: 12px;
height: 20px;
line-height: 18px;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Tablet Styles β
css
/* Tablet-specific styles */
.responsive-container.tablet :deep(.el-table th),
.responsive-container.tablet :deep(.el-table td) {
padding: 10px 6px;
}
.responsive-container.tablet :deep(.el-button) {
padding: 6px 12px;
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Responsive Pagination β
Pagination Layout Adaptation β
javascript
const getPaginationLayout = (device) => {
if (device === 'mobile') {
return 'total, prev, pager, next'
} else if (device === 'tablet') {
return 'total, sizes, prev, pager, next'
} else {
return 'total, sizes, prev, pager, next, jumper'
}
}
const options = {
tableOptions: {
pagination: {
layout: getPaginationLayout(currentDevice.value),
pageSizes: currentDevice.value === 'mobile' ? [10, 20] : [10, 20, 50, 100]
}
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Media Query Integration β
CSS Media Queries β
css
/* Use media queries for true responsiveness */
@media (max-width: 768px) {
.ma-pro-table {
font-size: 14px;
}
.ma-pro-table .el-table th,
.ma-pro-table .el-table td {
padding: 8px 4px !important;
}
.search-form .el-form-item {
margin-bottom: 12px;
}
}
@media (max-width: 480px) {
.ma-pro-table {
font-size: 12px;
}
.toolbar-buttons .el-button {
padding: 4px 8px;
font-size: 12px;
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
JavaScript Media Queries β
javascript
const useMediaQuery = (query) => {
const [matches, setMatches] = useState(false)
useEffect(() => {
const media = window.matchMedia(query)
setMatches(media.matches)
const listener = (e) => setMatches(e.matches)
media.addListener(listener)
return () => media.removeListener(listener)
}, [query])
return matches
}
// Usage
const isMobile = useMediaQuery('(max-width: 768px)')
const isTablet = useMediaQuery('(max-width: 1024px) and (min-width: 769px)')1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Responsive Toolbar β
Toolbar Button Adaptation β
javascript
const getToolbarConfig = (device) => {
if (device === 'mobile') {
return {
size: 'small',
onlyIcons: true, // Show only icons
maxButtons: 3 // Maximum 3 buttons
}
} else if (device === 'tablet') {
return {
size: 'default',
showText: true, // Show text
maxButtons: 5
}
} else {
return {
size: 'default',
showText: true,
maxButtons: -1 // Show all buttons
}
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Best Practices β
1. Progressive Enhancement β
- Start designing from mobile
- Gradually add desktop features
- Ensure core functionality works on all devices
2. Performance Optimization β
- Avoid loading excessive data on small screens
- Use virtual scrolling for large datasets
- Optimize image and media resources
3. User Experience β
- Provide device-specific interaction methods
- Maintain consistent visual hierarchy
- Ensure touch targets are large enough
4. Testing Strategy β
- Test on real devices
- Use browser developer tools for simulation
- Consider network condition impacts
The responsive layout feature enables your table application to perfectly adapt to various devices, providing a consistent user experience.