antd checkbox 默认选中_Ant design vue table 单击行选中 勾选checkbox教程

最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传

期望:Ant design table 单击行选中 勾选checkedbox

实现:

单选:

onClickRow(record) {

return {

on: {

click: () => {

let keys = [];

keys.push(record.id);

this.selectedRowKeys = keys;

}

}

}

}

多选:

onClickRowMulti(record) {

return {

on: {

click: () => {

let rowKeys=this.selectedRowKeys

if(rowKeys.length>0 && rowKeys.includes(record.id)){

rowKeys.splice(rowKeys.indexOf(record.id),1)

}else{

rowKeys.push(record.id)

}

this.selectedRowKeys = rowKeys;

}

}

}

}

补充知识:使用Ant Design的Table和Checkbox模拟Tree

一、小功能大需求

先看下设计图:

需求如下:

1、一级选中(取消选中),该一级下的二级全部选中(取消选中)

2、二级全选,对应的一级选中,二级未全选中,对应的一级不选中

3、支持搜索,只搜索二级数据,并且只展示搜索到的数据以及对应的一级title,如:搜索“店员”,此时一级只展示咖啡厅....其他一级隐藏,二级只展示店员,其他二级隐藏

4、搜索出来的数据,一级不可选中,即不允许全选,搜索框清空时,回归初始化状态

5、搜索后,自动展开所有二级,默认情况下收起所有二级

看到图的时候,第一反应就是使用Tree就能搞定,但是翻阅了文档后,发现Tree并不能全部完成,所以就只能使用其他组件进行拼装,最后发现使用Table和Checkbox可以完美实现。

二、逐步完成需求

如果不想看这些,可直接到最后,有完整代码。。。。。。

1、页面构建

这个就不用多说,只是一个简单的Table嵌套Checkbox,具体可去查看文档,直接贴代码,因为是布局,所有可以忽略代码中的事件。

注意一点:因为搜索时,会改变数据,所以需要将初始化的数据进行保存。

import React, { useState, useRef, useEffect } from "react";

import { Table, Input, Checkbox } from "antd";

const { Search } = Input;

export default () => {

const initialData: any = useRef([]); //使用useRef创建initialData

const [data, setData] = useState([

{

key: 1,

title: "普通餐厅(中餐/日料/西餐厅)",

checkboxData: [

{ key: 12, title: "普通服务员" },

{ key: 13, title: "收银" },

{ key: 14, title: "迎宾/接待" },

],

},

{

key: 2,

title: "零售/快消/服装",

checkboxData: [

{ key: 17, title: "基础店员" },

{ key: 19, title: "收银员" },

{ key: 20, title: "理货员" },

],

},

]);

useEffect(() => {

initialData.current = [...data]; //设置初始化值

}, []);

const [checkedJob, setCheckedJob] = useState([]); //设置子级中选择的类

const [selectedRowKeys, setSelectedRowKeys] = useState([]); //设置选择的行

const expandedRowRender = (record: any) => {

return (

请选择岗位,或勾选类别全选岗位

{record.checkboxData.map((item: any) => {

return (

value={item.key}

key={item.key}

onChange={checkChange}

>

{item.title}

);

})}

);

};

const rowSelection = {

selectedRowKeys,

};

return (

style={ {

background: "#fff",

padding: 24,

boxSizing: "border-box",

width: 982,

}}

>

placeholder="请输入岗位名称"

onSearch={(value) => {

console.log(loop(value));

}}

/>

showHeader={false}

columns={columns}

expandable={ {

expandedRowRender,

}}

dataSource={data}

pagination={false}

rowSelection={rowSelection}

/>

);

};

const columns = [{ title: "title", dataIndex: "title", key: "title" }];

2、一级选中(取消全选)

当一级选中(取消全选)时,需要更新对应二级选项的状态。在antd文档中,使用rowSelection的onSelect,可以设置选择/取消选择某行的回调。

onSelect:(record,selected)=> record:操作当前行的数据,selected:true:全选,false:取消全选

注意:当全选时,不能直接添加当前一级下的所有二级,需要过滤掉当前已经选中的二级

具体逻辑如下代码:

//首选在rowSelection配置中添加onSelectconst rowSelection = {

selectedRowKeys,

onSelect

};

//一级全选或者取消的逻辑

const onSelect = (record: any, selected: any) &

你可能感兴趣的:(antd,checkbox,默认选中)