前端hook项目pc总结笔记-ant design table多选

 const rowSelection = {
    type: "checkbox",
    selectedRowKeys,
    onChange: onSelectChange,
    columnTitle: <Checkbox checked={checkboxed}  onChange={selectAll}>
     全选
    </Checkbox>,
    onSelect: (record: any, selected: any, selectedRows: any) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected: any, selectedRows: any, changeRows: any) => {
      console.log(selected, selectedRows, changeRows);
    },
  };

rowSelection 自定义一个Dom

 const [checkboxed,setCheckBoxed]=useState<boolean>(false)
  // 全选的方法
  const selectAll = () => {
    // data 是这页面表格的所有数据
    // selectedRows 为state中存放的选中的表格行
    if(!checkboxed){
      let arr:any=[]
      menuData&&menuData.list.map((item:any,index:any)=>{
          arr.push(item.id.toString())
      })
      console.log(arr,"arr")
      setSelectedRowKeys(arr)
    }else{
      setSelectedRowKeys([])
    }
    setCheckBoxed(!checkboxed)
  };

注意SelectedRowKeys是字符串数组

 自定义完成