明霞山资源网 Design By www.htccd.com
最近了解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<any>([]); //设置选择的行
const expandedRowRender = (record: any) => {
return (
<div style={{ paddingLeft: 50, boxSizing: "border-box" }}>
<p>请选择岗位，或勾选类别全选岗位</p>
<div>
<Checkbox.Group value={checkedJob}>
{record.checkboxData.map((item: any) => {
return (
<Checkbox
value={item.key}
key={item.key}
onChange={checkChange}
>
{item.title}
</Checkbox>
);
})}
</Checkbox.Group>
</div>
</div>
);
};
const rowSelection = {
selectedRowKeys,
};
return (
<div
style={{
background: "#fff",
padding: 24,
boxSizing: "border-box",
width: 982,
}}
>
<Search
placeholder="请输入岗位名称"
onSearch={(value) => {
console.log(loop(value));
}}
/>
<Table
showHeader={false}
columns={columns}
expandable={{
expandedRowRender,
}}
dataSource={data}
pagination={false}
rowSelection={rowSelection}
/>
</div>
);
};
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) => {
//因为存在搜索，所以需要使用我们的初始化数据，找到当前record.key在初始化数据中对应的数据
let initialParent = initialData.current.find(
(d: any) => d.key === record.key
); //初始化数据中对应的二级数据
let selectParentData = initialParent.checkboxData
"htmlcode">
//判断b数组中的数据是否全部在a数组中 const isContained = (a: any, b: any) => {
if (!(a instanceof Array) || !(b instanceof Array)) return false;
if (a.length < b.length) return false;
var aStr = a.toString();
for (var i = 0, len = b.length; i < len; i++) {
if (aStr.indexOf(b[i]) == -1) return false;
}
return true;
};
//设置checkbox的onChange事件
const checkChange = (e: any) => {
let praentRowsKey: any;
//找到选中的二级对应的父级key
initialData.current.forEach((v: any) => {
if (v.checkboxData.find((d: any) => d.key === e.target.value)) {
praentRowsKey = v.key;
}
});
if (e.target.checked) {
//选中时 设置当前的check数组
let newCheckedJob = [...checkedJob, e.target.value];
setCheckedJob(newCheckedJob);
//判断当前二级的内容是否全部被选中，如果全部选中，则需要设置selectedRowKeys
//praentRowsKey下的所有子元素
let childArr = initialData.current
.find((d: any) => d.key === praentRowsKey)
"htmlcode">
//Search组件搜索时，触发更改data<Search
placeholder="请输入岗位名称"
onSearch={(value) => {
setData(loop(value));
}}
/>
//搜索岗位时，进行过滤
const loop = (searchValue: any) => {
let loopData = initialData.current"htmlcode">
const [selectAllDisabled, setSelectAllDisabled] = useState<boolean>(false); //声明一个变量，控制是否允许选择，默认为false
//在rowSelection中添加getCheckboxProps
const rowSelection = {
selectedRowKeys,
onSelect,
getCheckboxProps: (record: any) => ({
disabled: selectAllDisabled, //true：禁止，false：允许
}),
};
//在搜索的时候设置
const loop = (searchValue: any) => {
...
setSelectAllDisabled(searchValue "htmlcode">
const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]); //声明变量设置展开的行，默认全都收起
//table的 expandable添加 onExpand，expandedRowKeys
<Table
expandable={{
expandedRowRender,
onExpand,
expandedRowKeys,
}}
/>
//搜索时改变状态
const loop = (searchValue: any) => {
...
//有数据时自动展开所有搜索到的，无数据的时候默认全部收起
setExpandedRowKeys(
searchValue "" src="/UploadFiles/2021-04-02/20201024142206.jpg">
这种优化，就需要设置rowSelection的renderCell（注意，rendercell在antd的4.1+版本才能生效），配合Checkbox进行更改。具体代码如下。
1、设置renderCell
将我们在第二步和第五步设置的onSelect以及getCheckboxProps隐藏，再配置renderCell
const rowSelection = {
selectedRowKeys,
// onSelect,
// getCheckboxProps: (record: any) => ({
// disabled: selectAllDisabled,
// }),
renderCell: (checked: any, record: any) => {
//当前record.key对应大初始化数据的一级所有数据
let parentArr = initialData"htmlcode">
const onClick = (e: any, record: any) => {
//存在搜索时，需要进行处理selectParentData
let initialParent = initialData.current.find(
(d: any) => d.key === record.key
);
let selectParentData = initialParent.checkboxData
"htmlcode">
import React, { useState, useRef, useEffect } from "react";
import { Table, Input, Checkbox } from "antd";
const { Search } = Input;
export default () => {
const initialData: any = useRef([]);
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([12]); //设置选择的二级
const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]); //设置选择的行
const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]); //设置展开的行
const [selectAllDisabled, setSelectAllDisabled] = useState<boolean>(false); //选择的时候，禁止全选
//搜索岗位时，进行过滤
const loop = (searchValue: any) => {
let loopData = initialData.current"border-box" }}>
<p>请选择岗位，或勾选类别全选岗位</p>
<div>
<Checkbox.Group value={checkedJob}>
{record.checkboxData.map((item: any) => {
return (
<Checkbox
value={item.key}
key={item.key}
onChange={checkChange}
>
{item.title}
</Checkbox>
);
})}
</Checkbox.Group>
</div>
</div>
);
};
const rowSelection = {
selectedRowKeys,
// onSelect,
// getCheckboxProps: (record: any) => ({
// disabled: selectAllDisabled,
// }),
renderCell: (checked: any, record: any) => {
//当前record.key对应大初始化数据的一级所有数据
let parentArr = initialData"#fff",
padding: 24,
boxSizing: "border-box",
width: 982,
}}
>
<Search
placeholder="请输入岗位名称"
onSearch={(value) => {
console.log(loop(value));
setData(loop(value));
}}
/>
<Table
showHeader={false}
columns={columns}
expandable={{
expandedRowRender,
onExpand,
expandedRowKeys,
}}
dataSource={data}
pagination={false}
rowSelection={rowSelection}
/>
</div>
);
};
const columns = [{ title: "title", dataIndex: "title", key: "title" }];
以上这篇Ant design vue table 单击行选中 勾选checkbox教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
明霞山资源网 Design By www.htccd.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。