# TagColumn 标签列

const columns = [
  {
    type: "tag",
    dataIndex: "tags",
    // 如果字段的值是字符串，或者字符串数组，那么无需设置tags
    // 如果字段的值是对象，或者对象数组，那么需要设置tags
    // 传入字符串，表示属性名称，会把对象的该属性显示出来
    text: "label",
    // 传入函数
    text: (tag) => tag.label,
    // 标签的颜色
    // 传入字符串，所有的标签将使用此颜色
    // 传入函数，可以根据当前标签的文本，返回不同的颜色。
    color: "red",
    color: (tag) => {
      return tag.length > 5 ? "red" : "blue";
    },
  },
];

# 示例

序号
字符串数组
字符串
对象
对象数组，指定属性
对象数组，函数用法
1
ab
Hello
a
ab
ab
2
cd
World
c
cd
cd
<script>
export default {
  render () {
    return <erp-table
      dataSource={[
        {
          key: 1,
          tagsString: 'Hello',
          tags: ['a', 'b'],
          tagsObjArray: [
            { label: 'a', value: 1 },
            { label: 'b', value: 2 },
          ],
          tagsObj: {
            label: 'a',
            value: 1,
          },
        },
        {
          key: 2,
          tagsString: 'World',
          tags: ['c', 'd'],
          tagsObjArray: [
            { label: 'c', value: 3 },
            { label: 'd', value: 4 },
          ],
          tagsObj: {
            label: 'c',
            value: 3,
          }
        },
      ]}
      columns={[
        '#',
        {
          type: 'tag',
          dataIndex: 'tags',
          title: '字符串数组',
        },
        {
          type: 'tag',
          dataIndex: 'tagsString',
          title: '字符串',
        },
        {
          type: 'tag',
          dataIndex: 'tagsObj',
          title: '对象',
          text: 'label',
        },
        {
          type: 'tag',
          dataIndex: 'tagsObjArray',
          text: 'label',
          title: '对象数组，指定属性',
          color: 'red',
        },
        {
          type: 'tag',
          key: 'tagsObjArrayFn',
          dataIndex: 'tagsObjArray',
          title: '对象数组，函数用法',
          text: tag => tag.label,
          color: tag => tag === 'a' ? 'red' : 'blue'
        },
      ]}
    />
  }
}
</script>

← ActionColumn 操作列 →