Ant Design Vue中Table的选中详解

发布时间:2022-01-14 发布网站:https://www.cnblogs.com/IwishIcould
前端之家收集整理的这篇文章主要介绍了Ant Design Vue中Table的选中详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<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,// 用户手动选择/取消选择所有列的回调
    onSelectAll: (selected: boolean,selectedRows: [],changeRows: []) => {
        console.log(
            '  用户手动选择/取消选择所有列的回调  ',selectedRows,changeRows
        )
    },}

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

Ant Design Vue中Table的选中详解

总结


以上是前端之家为你收集整理的Ant Design Vue中Table的选中详解全部内容,希望文章能够帮你解决Ant Design Vue中Table的选中详解所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。