ant-design-vue的table组件的自定义表头和表格内容

使用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'
	        },
		]
	}
}