简单使用

如果只是做简单展示，只需要配置a-table中的colums和data-source即可

columns是一个数组，这个数组配置的是表格标题，包含的每一个对象对应一列。title是要展示的文本，dataIndex对应data-source绑定的inform中的值，比如用户名的dataIndex是username，data-source对应inform，所以用户名就对应inform中的username

通过插槽传入参数

插槽传入两个参数

在template中使用slot接收参数时，也可以接收两个参数，这里可以打印一下结果

如果需要在这里使用其他行内的数据，就使用这种方法

代码：

<template>
  <div class="userTable">
    <a-table :columns="columns" :data-source="inform">
      <span slot="tags" slot-scope="text, record">
        <!-- {{record}} -->
        <a-tag
          v-for="tag in text"
          :key="tag"
          :color="
            tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'
          "
        >
          {{ tag.toUpperCase() }}
        </a-tag>
      </span>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: '用户名',
    dataIndex: 'username'
  },
  {
    title: '电话',
    dataIndex: 'phone'
  },
  {
    title: '地址',
    dataIndex: 'address'
  },
  {
    title: '标签',
    dataIndex: 'tags',
    scopedSlots: { customRender: 'tags' }
  }
]
export default {
  data() {
    return {
      columns,
      inform: [
        {
          key: '1',
          username: 'John Brown',
          phone: 18788888888,
          address: 'New York No. 1 Lake Park',
          tags: ['loser', 'volcano']
        },
        {
          key: '2',
          username: 'Jim Green',
          phone: 18799999999,
          address: 'London No. 1 Lake Park',
          tags: ['loser', 'volcano']
        },
        {
          key: '3',
          username: 'Joe Black',
          phone: 18766666666,
          address: 'Sidney No. 1 Lake Park',
          tags: ['loser', 'volcano']
        },
        {
          key: '4',
          username: 'kobe',
          phone: 18733333333,
          address: 'Sidney No. 1 Lake Park',
          tags: ['loser', 'volcano']
        }
      ]
    }
  }
}
</script>

<style></style>