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

博主在react框架中用了ant design组件库（以下简称ad)，在vue框架中使用了element组件库（以下简称ele），最近遇到了两个需求，同用到了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={xxxRowSelection} 
	rowKey={record => record.xxxId}
	columns={columns} 
	dataSource={data} />
}

2、在onxxxSelectedRowKeysChange中可以获得选中行的list，一个是key值的list，一个是行内容的list。不指定rowKey的情况下，key值的list为index。 注：index在table有分页的情况下会出现差错。如何处理分页index请看我另外一篇blog(还没写-手动狗头)

3、数据保存回弹 用一个关键字标识该行是否被选中，如checked

 if (data.code === 200 && data.data) {
        for (let i in data.data) {
          if (data.data[i].checked && data.data[i].checked === true) {
            xxxSelectedRowKeys.push(data.data[i].xxxId);
          }
        }
 }
this.setState({
      xxxSelectedRowKeys:xxxzSelectedRowKeys,
    });

这样就会自动将已选中的行渲染回来。

ele 1、在table组件中绑定selection-change方法，并把第一列设置为check框，xxxTableSelections为选中行的所有内容list

<template>
<el-table
    :data="data"
    @selection-change="handlexxxSelectChange"
    ref="xxxTable">
       <el-table-column
           type="selection"
           width="55"
           reserve-selection>
   </el-table-column>
 </el-table>

class
private handlexxxSelectChange(val: any) {
        this.xxxTableSelections = val;
}

2、数据保存回弹 用一个关键字标识该行是否被选中，如checked ad用selected的key值list就行，ele要回弹一个内容list给toggleRowSelection属性 要用到toggleRowSelection属性，需要给table指定一个ref别名

 if (data.code === 200 && data.data) {
      for (let item in data.data)  {
        if(item.cheked === true) {
              this.$nextTick(() => {
                      (this.$refs.xxxTable as any).toggleRowSelection(item, true);  // 是勾选的
              });
        } else {
              this.$nextTick(() => {
                      (this.$refs.xxxTable as any).toggleRowSelection(item, false);   // 不是勾选的
              });
           }
     	}
}

注：toggleRowSelection属性有时候用起来就是个大坑，直接用this.$refs.xxxTable.toggleRowSelection()可能提示找不到这个属性，记得加个any试试~

手把手教学，再不会就改行吧（手动比心~）