antdv 实现表格中多个标签 分开显示

如下图，实现效果：

 

 

{
    title: '商品标签',
    dataIndex: 'labelnames',
    width: 260,
    customRender: ({ record }) => {
      const labelnames = record.labelnames;
      const labelsH: [h] = [];
      if (labelnames != undefined && labelnames != '') {
        const labelnamesArray = labelnames.split(',');
        const colors: string[] = [
          'orange',
          'green',
          'cyan',
          'purple',
          'blue',
          'pink',
          'red',
          '#f503',
          '#2de7f5',
          '#87d018',
          '#108e29',
        ];
        labelnamesArray.forEach((item, index) => {
          labelsH.push(h(Tag, { color: colors[index <= colors.length ? index : 0] }, () => item));
          labelsH.push(h('span', null, ' ')); //加入空白
        });
      }
      return labelsH;
    },
  },

import { h } from 'vue';
import { Tag } from 'ant-design-vue';

以上的思路：

根据数组中的值，来加入多个Tag组件，并且加上空白，然后返回数组，让UI来喧染。

 

 

参考：https://blog.csdn.net/weixin_47450807/article/details/122933658