Ant Design Vue中Table的選中詳解
阿新 • • 發佈:2021-08-09
作者:明月人倚樓<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>
出處:https://www.cnblogs.com/IwishIcould/
想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯絡你;(っ•̀ω•́)っ✎⁾⁾!
如果覺得這篇文章對你有小小的幫助的話,記得在右下角點個“推薦”哦,或者關注博主,在此感謝!
萬水千山總是情,打賞5毛買辣條行不行,所以如果你心情還比較高興,也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾!
想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯絡你;(っ•̀ω•́)っ✎⁾⁾!
如果文中有什麼錯誤,歡迎指出。以免更多的人被誤導。