Ant Design for Vue的Table组件一列显示多个参数

德顺

发布于 2023-08-25 12:42:00

6350

发布于 2023-08-25 12:42:00

文章被收录于专栏：前端资源

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 删除

ant