使用a-table组件时，有时候需要自定义表头以及表格内容
1、自定义表格内容
// html
<template slot="alarmTime" slot-scope="text, scope">
<span v-if="warningType === '0'">{
{
scope.alarmTime}}</span>
<span v-else>无</span>
</template>
// js
data() {
return {
columns: [
{
title: '告警时间',
dataIndex: 'alarmTime',
scopedSlots: {
customRender: 'alarmTime' },// 表格内容插槽
align: 'center'
},
]
}
}
2、自定义表格表头
<template slot="customAlarmTimeTitle">
<span>发生时间</span>
<span>
<a-icon type="caret-up" />
<a-icon type="caret-down" />
</span>
</template>
<template slot="alarmTime" slot-scope="text, scope">
<span v-if="warningType === '0'">{
{
scope.alarmTime}}</span>
<span v-else>无</span>
</template>
// js
data() {
return {
columns: [
{
// title: '告警时间',// 注意，此时不能给title值了，否则会优先展示title的值，导致slots配置无效
dataIndex: 'alarmTime',
slots: {
title: 'customAlarmTimeTitle' },// 表头插槽
scopedSlots: {
customRender: 'alarmTime' },// 表格内容插槽
align: 'center'
},
]
}
}
