Ant Design for Vue的Table组件一列显示多个参数
Antd for Vue 的 Table 组件还是很方便的，今天就记录一下，如何让在一列中展示多个参数。
HTML部分代码：
<a-table :columns="levelColumns" :data-source="levelData" :pagination="false" bordered>
<img class="level-icon" slot="icon" slot-scope="icon" :src="icon" alt="">
<span class="level-assess" slot="assessScoreLower" slot-scope="text,record">
{{record.assessScoreLower}}-{{record.assessScoreUpper}}万
</span>
</a-table>数据部分：
data() {
return {
levelColumns:[{
title: '等级',
dataIndex: 'icon',
key: 'icon',
width: '16.7%',
scopedSlots: { customRender: 'icon' },
},
{
title: '区间',
dataIndex: 'assessScoreLower',
key: 'assessScoreLower',
width: '36.7%',
scopedSlots: { customRender: 'assessScoreLower' },
},
{
title: '权益',
dataIndex: 'levelDesc',
key: 'levelDesc',
},],
levelData:[],
}
},几个属性说明：
columns 配置描述，也就是表头信息。
title 表头显示内容。
dataIndex 列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法。
key Vue 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性。
scopedSlots 使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 scopedSlots: { customRender: 'XXX'}
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-07-21)，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读