ant-design-vue的table组件的自定义表头和表格内容
2024-01-10 12:33:00
使用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'
},
]
}
}
文章来源:https://blog.csdn.net/qq_36877078/article/details/135499032
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!