Are you an LLM? You can read better optimized documentation at /front/component/ma-table/custom-render.md for this page in Markdown format
Custom Rendering β
Demonstrates how to use cellRender
and headerRender
for custom cell and header rendering.
Custom Rendering Demo β
Features β
Rendering Types β
- Cell Rendering: Customize cell content via
cellRender
- Header Rendering: Customize header content via
headerRender
- JSX Syntax: Supports writing render functions using JSX and TSX syntax
- Component Rendering: Can render any Vue component
Render Parameters β
Render functions receive TableColumnRenderer
parameters:
row
: Current row datacolumn
: Current column configuration$index
: Current row indexoptions
: Column option configurationattrs
: Other attributes
Configuration Examples β
Basic Cell Rendering β
javascript
const columns = [
{
label: 'Avatar',
prop: 'avatar',
cellRender: ({ row }) => (
<el-image
style="width: 40px; height: 40px; border-radius: 50%;"
src={row.avatar}
fit="cover"
/>
)
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Progress Bar Rendering β
javascript
const columns = [
{
label: 'Skill Level',
prop: 'skillLevel',
cellRender: ({ row }) => (
<el-progress
percentage={row.skillLevel}
color={row.skillLevel >= 80 ? '#67c23a' : '#e6a23c'}
stroke-width={8}
text-inside
/>
)
}
]
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
Custom Header β
javascript
const columns = [
{
label: 'Skill Level',
prop: 'skillLevel',
headerRender: () => (
<div style="display: flex; align-items: center; gap: 4px;">
<span>β‘</span>
<span style="color: #e74c3c;">Skill Level</span>
</div>
)
}
]
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Action Buttons β
javascript
const columns = [
{
label: 'Actions',
prop: 'actions',
cellRender: ({ row }) => (
<div style="display: flex; gap: 8px;">
<el-button size="small" type="primary" onClick={() => handleEdit(row)}>
Edit
</el-button>
<el-button size="small" type="danger" onClick={() => handleDelete(row)}>
Delete
</el-button>
</div>
)
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Status Tag Rendering β
javascript
const columns = [
{
label: 'Status',
prop: 'status',
cellRender: ({ row }) => {
const statusConfig = {
'online': { type: 'success', icon: 'π’', text: 'Online' },
'busy': { type: 'warning', icon: 'π‘', text: 'Busy' },
'offline': { type: 'danger', icon: 'π΄', text: 'Offline' }
}
const config = statusConfig[row.status]
return (
<el-tag type={config.type}>
<span style="margin-right: 4px;">{config.icon}</span>
{config.text}
</el-tag>
)
}
}
]
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
Complex Content Rendering β
javascript
const columns = [
{
label: 'User Info',
prop: 'userInfo',
cellRender: ({ row }) => (
<div style="display: flex; align-items: center; gap: 12px;">
<el-avatar size={40} src={row.avatar}>
{row.name.charAt(0)}
</el-avatar>
<div>
<div style="font-weight: bold; color: #333;">
{row.name}
</div>
<div style="font-size: 12px; color: #999;">
{row.email}
</div>
</div>
</div>
)
}
]
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
Rating Component Rendering β
javascript
const columns = [
{
label: 'Rating',
prop: 'rating',
cellRender: ({ row }) => (
<el-rate
v-model={row.rating}
disabled
show-score
text-color="#ff9900"
score-template="{value} points"
/>
)
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Render Function Type Definitions β
typescript
interface TableColumnRenderer {
row: any // Current row data
column: TableColumn // Current column configuration
$index: number // Current row index
options: TableColumn // Column options
attrs: any // Other attributes
}
type CellRenderFunction = (data: TableColumnRenderer) => VNode | string
type HeaderRenderFunction = (data: TableColumnRenderer) => VNode | string
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Best Practices β
- Performance Considerations: Avoid complex calculations in render functions, preprocess data instead
- Event Handling: Define event handlers outside render functions to avoid recreation
- Style Control: Use inline styles or CSS classes to control rendered content styling
- Component Reuse: Extract complex rendering logic into reusable components
- Type Safety: Add type annotations for render function parameters in TypeScript projects
Notes β
- Render functions can return VNodes, strings, or components
- Supports rendering all Element Plus components
- Can access and modify row data within render functions
- Events in render functions need manual handling
- Recommended to use JSX/TSX syntax for better development experience