antd 表格内（Table）Checkbox树形数据展示,以及自己实现树形数据操作（自己实现TreeCheckbox）
前言：
最近在做一个权限管理的项目，需要配置权限。业务给的要求在表格里，展示权限以及编辑权限。然后根据权限数组，动态展示模块。
实现过程以及代码
在线运行实例及代码地址:antd 表格内（Table）Checkbox树形数据展示,以及树形数据操作-Sandboxes（自己实现TreeCheckbox）
效果图如下：
antd里有Tree组件，但是明显我这个需求无法使用，所以只能自己实现。
主要实现（参考antd 相关组件API antd版本为3.x,4.x可能会有细微变动）：
1.全选，反选（递归循环，every,some实现）
2.子级选中其父级选中，父级取消子级也取消。
主要代码：
changeFlag方法（实现了全选，反选，子级选中其父级选中，父级取消子级也取消，唯一标识就是data.code,如果你的不是自行修改）。可以把整个代码复制到项目中，根据自己的需求改变代码。
主要用了antd Table树形数据展示和Checkbox组件，主要就是每个表格都有checkbox然后自己实现树形选择。
import React, { Component } from 'react';
import { Table, Divider, Tag, Icon, Checkbox, Tree, Button } from 'antd';
class index extends Component {state = {data: [{key: "product",order: "1",title: "产品",data: {code: "product",enable_edt: "N",enable_view: "Y",has_edit: null,has_view: "N",name: "产品"},children: [{key: "fund_info",order: "2",title: "产品信息",data: {code: "fund_info",enable_edt: "N",enable_view: "Y",has_edit: null,has_view: "N",name: "产品信息"},children: [{key: "fund_base_info",order: "3",title: "基本信息",data: {code: "fund_base_info",enable_edt: "N",enable_view: "Y",has_edit: null,has_view: "N",name: "基本信息"},children: [{key: "field_cplx",order: "4",title: "产品类型",data: {code: "field_cplx",enable_edt: "N",enable_view: "Y",has_edit: null,has_view: "N",name: "产品类型"},children: []},{key: "field_cpqc",order: "5",title: "产品全称",data: {code: "field_cpqc",enable_edt: "N",enable_view: "Y",has_edit: null,has_view: "N",name: "产品全称"},children: []}]},{key: "fund_sale_info",order: "26",title: "销售信息",data: {code: "fund_sale_info",enable_edt: "N",enable_view: "Y",has_edit: null,has_view: "N",name: "销售信息"},children: []}]},{key: "fund_role_info",order: "97",title: "岗位信息",data: {code: "fund_role_info",enable_edt: "N",enable_view: "Y",has_edit: null,has_view: "N",name: "岗位信息"},children: []}]}],//数据columns: [], //表格columnspermissionTableData: [],//权限树，表格数据editFlag: false,//是否为编辑状态changeData: [],//checkbox改变后得数据loading: true,//loading状态yTreeData: [],//原始树形数据}componentDidMount() {this.getRolePermissonTree();}//给子级添加父级KeyaddParentKeyWrapper = (tree) => {//深度克隆const data = JSON.parse(JSON.stringify(tree));function addParentKey(data, parentKey) {data.forEach(ele => {const { children } = ele;ele.data.parent_code = parentKey;if (children) {//如果唯一标识不是code可以自行改变addParentKey(children, ele.data.code)}})}addParentKey(data, null); //一开始为null,根节点没有父级return data;}getRolePermissonTree = () => { //项目中这里是请求接口this.setState({loading: true})let { data } = this.state; //实际上这个data是从接口来的let parentData = this.addParentKeyWrapper(data);//添加父级属性this.initData(parentData, "has_view");this.initData(parentData, "has_edit");let copyData = JSON.stringify(parentData); //备份原始数据let col = [{title: '菜单名称',dataIndex: 'data.name'},{title: '查看权限',dataIndex: 'data.has_view',render: (text, record) => {return (<> this.ViewonChange(e, record.data.code, "has_view")}//change事件indeterminate={record['has_viewindeterminate'] ? true : false} //全选与反选状态> )}},{title: '查看权限',dataIndex: 'data.has_edit',render: (text, record) => {return (<> this.EditonChange(e, record.data.code, "has_edit")}//change事件indeterminate={record['has_editindeterminate'] ? true : false} //全选与反选状态> )}}]this.setState({editFlag: true,columns: col})}//扁平化数组（tree）变为一维数组FlatArray = (data, val) => {if (data.length == 0) {return [];}let arr = [];data.map((item) => {arr.push(item.data);if (item.children.length > 0) {arr = arr.concat(this.FlatArray(item.children));}})return arr;}//保存saveMenu = () => {let { permissionTableData, yTreeData } = this.state;let col = [{title: '菜单名称',dataIndex: 'data.name'},{title: '查看权限',dataIndex: 'data.has_view',render: (text, record) => {return (<>{ y: 400, x: 1000 }} //滚动pagination={false} //分页>
)}}
export default index;本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！