mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
1.5 KiB
1.5 KiB
Custom Render Column Header
<n-data-table
ref='table'
:columns='columns'
:data='data'
:pagination='pagination'
/>
import { h, resolveComponent } from 'vue'
const renderTooltip = (trigger, content) => {
return h(resolveComponent('n-tooltip'), {
showArrow: true
}, {
trigger: () => trigger,
default: () => content
})
}
const createColumns = instance => {
return [
{
key: 'name',
title (column) {
return renderTooltip(
h(resolveComponent('n-gradient-text'), {
size: 24,
type: 'danger'
}, { default: () => 'Name' }),
'Tooltip Content'
)
}
},
{
key: 'age',
title (column) {
return h(resolveComponent('n-gradient-text'), {
size: '20',
type: 'info'
}, { default: () => 'Age' })
}
},
{
key: 'address',
title (column) {
return h(resolveComponent('n-gradient-text'), {
size: '16',
type: 'warning'
}, { default: () => 'Address' })
}
}
]
}
const data = [
{
key: 0,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park'
},
{
key: 1,
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park'
},
{
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park'
}
]
export default {
data () {
return {
data: data,
columns: createColumns(this),
pagination: {
pageSize: 10
}
}
}
}