<template>
    <a-table
        :columns="columns"
        :data-source="data"
        :row-selection="rowSelection"
    />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: '12%',
    },
    {
        title: 'Address',
        dataIndex: 'address',
        width: '30%',
        key: 'address',
    },
]

const data = [
    {
        key: 1,
        name: 'John Brown sr.',
        age: 60,
        address: 'New York No. 1 Lake Park',
    },
    {
        key: 2,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
    },
]

const rowSelection = {
    // 選中項發生變化時的回撥;根據這個函式就可以獲取使用者勾選的哪一個值
    onChange: (selectedRowKeys: (string | number)[], selectedRows: []) => {
        console.log(
            `選中的值: ${selectedRowKeys}`,
            'selectedRows: ',
            selectedRows
        )
    },

    // 戶手動選擇/取消選擇某列的回撥
    onSelect: (record: [], selected: boolean, selectedRows: []) => {
        console.log(
            '  戶手動選擇/取消選擇某列的回撥 ',
            record,
            selected,
            selectedRows
        )
    },

    // 使用者手動選擇/取消選擇所有列的回撥
    onSelectAll: (selected: boolean, selectedRows: [], changeRows: []) => {
        console.log(
            '  使用者手動選擇/取消選擇所有列的回撥  ',
            selected,
            selectedRows,
            changeRows
        )
    },
}

export default defineComponent({
    setup() {
        return {
            data,
            columns,
            rowSelection,
        }
    },
})
</script>
 

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！