ant-design-vue的table组件的自定义表头和表格内容_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'
	        },
		]
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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