【前端】Element-ui 和 Ant Design table 组件多选框详细踩坑攻略

最新推荐文章于 2025-04-04 08:41:59 发布

猫头姐姐

最新推荐文章于 2025-04-04 08:41:59 发布

阅读量1.9k

点赞数 1

文章标签： element ant design table

本文链接：https://blog.csdn.net/qq_34335450/article/details/97938023

版权

博主在react框架中用了ant design组件库（以下简称ad)，在vue框架中使用了element组件库（以下简称ele），最近遇到了两个需求，同用到了table组件的多选框功能，根据官方文档发现坑较多，踩坑如下，希望对新手有用。

table多选框
ad
1、首先在table组件中指定rowSelection，在用rowSelection时，要搭配使用rowKey
注：xxx部分为可以更改名字的部分，非xxx部分为系统属性名，不可随意更改，否则运行报错

onxxxSelectedRowKeysChange = (xxxSelectedRowKeys，xxxSelectedRows) => {
   
    this.setState({
    xxxSelectedRowKeys ，selectedRows});
  };
  
render(){
   
const xxxRowSelection = {
   
      selectedRowKeys: xxxxxSelectedRowKeys,
      onChange: this.onxxxxxSelectedRowKeysChange.bind(this),
};

<Table 
	rowSelection=