<template>
    <div>
        <div class="select">
            <div>
                院校省份：
                <a-checkbox-group
                    v-model="value"
                    name="checkboxgroup"
                    :options="plainOptions"
                    @change="onChange"
                />
                <br />院校省份：
                <a-checkbox-group
                    v-model="value"
                    name="checkboxgroup"
                    :options="plainOptions"
                    @change="onChange"
                />
                <br />院校省份：
                <a-checkbox-group
                    v-model="value"
                    name="checkboxgroup"
                    :options="plainOptions"
                    @change="onChange"
                />
                <br />
            </div>
            <div>
                院校省份：
                <a-checkbox-group
                    v-model="value"
                    name="checkboxgroup"
                    :options="plainOptions"
                    @change="onChange"
                />
                <br />院校省份：
                <a-checkbox-group
                    v-model="value"
                    name="checkboxgroup"
                    :options="plainOptions"
                    @change="onChange"
                />
                <br />院校省份：
                <a-checkbox-group
                    v-model="value"
                    name="checkboxgroup"
                    :options="plainOptions"
                    @change="onChange"
                />
                <br />
            </div>
        </div>
        <div class="table">
            <a-table :columns="columns" :data-source="data">
                <template v-slot:name="text">{{ text }}</template>
            </a-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref<string[]>([])
const options = ref([
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
    { label: 'Orange', value: 'Orange' },
]);
const plainOptions = ref(['Apple', 'Pear', 'Orange']);
function onChange(checkedValues: string) {
    console.log('checked = ', checkedValues);
    console.log('value = ', value.value);
}

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 80,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column Long Column',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
  {
    title: 'Long Column',
    dataIndex: 'address',
    key: 'address 4',
    ellipsis: true,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

</script>

<style lang="scss" scoped>
.select {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.table {
    margin-top: 60px;
}
</style>