antd table组件表格内换行

最新推荐文章于 2025-03-20 10:42:24 发布

reisaru

最新推荐文章于 2025-03-20 10:42:24 发布

阅读量1w

点赞数 1

分类专栏：前端文章标签： antd vue.js

本文链接：https://blog.youkuaiyun.com/qq_41337100/article/details/108261458

版权

前端专栏收录该内容

60 篇文章

订阅专栏

本文介绍了在Antd的Table组件中如何实现表格内容的换行。主要方法是利用slot，在columns定义中加入自定义槽，并在HTML模板中指定槽的渲染内容。通过在表格单元格中插入div元素，可以实现内容的多行展示，同时文章也提及了与行合并的结合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：
在这里插入图片描述
有两种方法，本质都是使用slot。
官方定义表格至少提供两个数据，columns定义了每一列的名字和表格数据对应的key，data是传进去的表格数据，是个列表[ ]，里面的每一个{ }是表格的一行，{ }的key在colums中定义。

<a-table :columns="columns" :data-source="data">

如果想要给表格的内容换行，只需要在对应colums定义的地方加入槽，意味着不是直接返回输入的值，而是返回槽内的模板。
最简单就是在定义colums时声明这个列返回的是槽，并且自定义槽的名字，然后在HTML的模板table中具体写这个槽渲染什么，像这个text就是传入这个td的值。

      <a-table
        bordered
        size="middle"
        row-key="id"
        :columns="col4"
        :scroll="{x: 600}"
        :data-source="list"
        :hideOnSinglePage="false"
        :pagination='false'
      >
          <span
            slot="RightWrap"
            slot-scope="text"
          >
            <template v-for="(item, index) in text">
              <div :key="index" v-html="item"></div>
            </template>
          </span>
      </a-table>

    const col4 = [
      {
        title: '权益清单',
        align: 'center',
        dataIndex: 'rightsText',
        key: 'rightstext',
        scopedSlots: { customRender: 'RightWrap' }
      },
	...
    ]

接下来这个就是直接利用槽往里面注入div元素，因为生成div的过程是可以注入可以换行的数据的。注意这个还和行的合并一起写了：

    public get col3 () {
      const that = this
      const cols = [
        {
          title: '用品ID',
          align: 'center',
          width: '130px',
          dataIndex: 'Id'
        },
        ...
        {
          title: '总计（元）',
          dataIndex: 'total',
          align: 'center',
          width: '200px',
          customRender: (value: any, row: any, index: any) => {
            let child = this.$createElement('div', {
              domProps: {
                innerHTML: value[0] + '<br>' + value[1] + '<br>' + value[2] + '<br>'
              }
            })

            let obj = {
              children: child,
              attrs: { rowSpan: 1 }
            }

            if (index === 0) {
              obj.attrs.rowSpan = this.list.length
            } else {
              obj.attrs.rowSpan = 0
            }
            return obj
          }
        }
      ]
      return cols
    }