<template>
  <a-table :dataSource="mockData" :columns="tableColumns" :pagination="false" :scroll="{y: 500}" rowKey="id"></a-table>
</template>

<script setup>
import {ref} from 'vue'
const mockData = []
for(let i = 0; i<1000; i++) {
  mockData.push({
    id: i,
    name: `选项${i}`,
    percent: i % 2 === 0 ? Math.random() : (0 - Math.random())
  })
}
const tableColumns = ref([
  {
    title: '选项编号',
    dataIndex: 'id',
    key: 'id',
    width: 200,
    // align: 'center',
  },
  {
    title: '选项名称',
    dataIndex: 'name',
    key: 'name',
    // align: 'center',
    customCell: () => {
      return {
        style: {
          color: '#1890ff'
        }
      }
    }
  },
  {
    title: '效用值',
    dataIndex: 'percent',
    key: 'percent',
    // align: 'center',
    customCell: (record) => {
      return {
        style: {
          color: record.percent >=0 ? '#52c19a' : '#923139'
        }
      }
    }
  }
])
</script>

<style lang="scss" scoped></style>
