antd 库的 Table 组件中删除一个或多个选中的列表

最新推荐文章于 2024-12-12 10:55:14 发布

偷光

最新推荐文章于 2024-12-12 10:55:14 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 react.js 前端框架 anti-design-vue

本文链接：https://blog.youkuaiyun.com/wbskb/article/details/132118807

文章介绍了如何在React应用中使用useState管理状态，实现表格的行选择和清空/删除功能。重点展示了如何通过`selectedRowKeys`和`onChange`控制选中项，以及使用`filter`和`includes`方法动态过滤数据以实现删除选中行的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

先解释一下原代码每个方法的含义


const TablePage: React.FC = () => {
  /* 
    selectedRowKeys	指定选中项的 key 数组，需要和 onChange 进行配合
    在此处，通过 rowSelection.selectedRowKeys 来控制选中项。
    */
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  // loading 页面是否加载中
  const [loading, setLoading] = useState(false);

  // 点击了清空
  const start = () => {
    setLoading(true);
    // ajax request after empty completing
    setTimeout(() => {
      setSelectedRowKeys([]);
      setLoading(false);
    }, 1000);
  };

  // onSelectChange 触发了选择改变
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  // 开启可选则按钮
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  //禁用
  const hasSelected = selectedRowKeys.length > 0;

  // 删除
  const deleteList = () => {
    console.log(selectedRowKeys);
    const dataVale = data.filter((item) => !selectedRowKeys.includes(item.key));

    console.log(dataVale);
  };
  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button
          type="primary"
          onClick={start}
          disabled={!hasSelected}
          loading={loading}
        >
          清空
        </Button>{" "}
        &nbsp;
        <Button onClick={deleteList}>删除</Button>
        <span style={{ marginLeft: 8 }}>
          {hasSelected ? `你选择了 ${selectedRowKeys.length} 个 ` : ""}
        </span>
      </div>
      {/* 
      rowSelection :表格行是否可选择，配置项
      columns	表格列的配置描述
      dataSource	数据数组
      */}
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
    </div>
  );
};

修改后的数据，重新定义了 data

  const [data, setData] = useState([
    { key: "t", name: "唐诗", age: 18, address: "唐朝" },
    { key: "s", name: "宋词", age: 18, address: "宋朝" },
    { key: "y", name: "元曲", age: 18, address: "元朝" },
    { key: "m", name: "明文", age: 18, address: "明朝" },
    { key: "q", name: "清小说", age: 18, address: "清朝" },
  ]);

添加删除按钮

在原有的选择和操作用法上先添加一个删除按钮

 <Button onClick={deleteList}>删除</Button>

删除按钮的方法

  // 删除
  const deleteList = () => {
    console.log(selectedRowKeys);
    const dataVale = data.filter((item) => !selectedRowKeys.includes(item.key));
    setData(dataVale);
    console.log(dataVale);
  };

解析一下这行代码：

data.filter((item) => !selectedRowKeys.includes(item.key));

代码使用了filter和includes两种数组方法来创建新的newData数组。

首先，来分析一下这行代码的整体逻辑：

filter方法用于遍历原始的data数组，并根据指定条件对数组元素进行筛选。
在每次遍历数组元素时，通过!selectedRowKeys.includes(item.key)来判断该元素的key属性是否存在于selectedRowKeys数组中。
如果item.key在selectedRowKeys数组中不存在（即includes返回false），则该元素会被保留在newData数组中。
最后，newData数组会包含筛选后的结果，即不包含选中行的新的数据数组。

分别解释一下filter和includes的作用：

filter方法是一个高阶函数，接受一个回调函数作为参数。回调函数会遍历数组中的每个元素，并根据返回值来决定是否保留该元素。若返回值为true，则保留该元素；若返回值为false，则舍弃该元素。
includes方法用于判断数组是否包含某个指定元素。它接受一个参数作为要搜索的元素，并返回一个布尔值。如果指定的元素存在于数组中，返回true；反之，返回false。

因此，const newData = data.filter(item => !selectedRowKeys.includes(item.key)); 这行代码的作用是从data数组中过滤出那些item.key在selectedRowKeys数组中不存在的元素，然后赋值给newData数组，实现了删除选中行的效果。

完整代码：

import React, { useState } from "react";
import { Button, Table } from "antd";
import type { ColumnsType } from "antd/es/table";

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: "Name",
    dataIndex: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
  },
  {
    title: "Controls",
    dataIndex: "Controls",
    render: () => <Button>显示</Button>,
  },
];

// for (let i = 6; i < 46; i++) {
//   data.push({
//     key: i,
//     name: `Edward King ${i}`,
//     age: 32,
//     address: `London, Park Lane no. ${i}`,
//   });
// }

const TablePage: React.FC = () => {
  /* 
    selectedRowKeys	指定选中项的 key 数组，需要和 onChange 进行配合
    在此处，通过 rowSelection.selectedRowKeys 来控制选中项。
    */
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  // loading 页面是否加载中
  const [loading, setLoading] = useState(false);

  const [data, setData] = useState([
    { key: "t", name: "唐诗", age: 18, address: "唐朝" },
    { key: "s", name: "宋词", age: 18, address: "宋朝" },
    { key: "y", name: "元曲", age: 18, address: "元朝" },
    { key: "m", name: "明文", age: 18, address: "明朝" },
    { key: "q", name: "清小说", age: 18, address: "清朝" },
  ]);

  // 点击了清空
  const start = () => {
    setLoading(true);
    // ajax request after empty completing
    setTimeout(() => {
      setSelectedRowKeys([]);
      setLoading(false);
    }, 1000);
  };

  // onSelectChange 触发了选择改变
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  // 开启可选则按钮
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  //禁用
  const hasSelected = selectedRowKeys.length > 0;

  // 删除
  const deleteList = () => {
    console.log(selectedRowKeys);
    const dataVale = data.filter((item) => !selectedRowKeys.includes(item.key));
    setData(dataVale);
    console.log(dataVale);
  };
  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button
          type="primary"
          onClick={start}
          disabled={!hasSelected}
          loading={loading}
        >
          清空
        </Button>{" "}
        &nbsp;
        <Button onClick={deleteList}>删除</Button>
        <span style={{ marginLeft: 8 }}>
          {hasSelected ? `你选择了 ${selectedRowKeys.length} 个 ` : ""}
        </span>
      </div>
      {/* 
      rowSelection :表格行是否可选择，配置项
      columns	表格列的配置描述
      dataSource	数据数组
      */}
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
    </div>
  );
};

export default TablePage;