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



推荐阅读:

JavaScript的引入方式和基本属性

用css实现文本溢出 超出部分隐藏显示省略号

Bootstrap 模态框(Modal)插件的基本应用

【笔记】微信小程序注册、发布流程及首页自动跳转

html CSS引用字体文件

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)