天天看点

React使用antd Table生成层级多选组件

  用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限。于是写了一种实现的方式。首先应用是一个二级树,一级表示的是应用分组,二级表示的是应用,这是table的最左边的数据。然后是按钮的数据,这里显示在table的头部。

  

React使用antd Table生成层级多选组件
React使用antd Table生成层级多选组件
React使用antd Table生成层级多选组件

View Code

  利用antd table实现层级多选组件。

  具体思路:

React使用antd Table生成层级多选组件
React使用antd Table生成层级多选组件

   封装antd 的Checkbox组件

React使用antd Table生成层级多选组件
React使用antd Table生成层级多选组件

  js实现的Map工具类。

  功能虽然完成了,但是总是避免不了需求的变更。要求选择左边应用对应的checkbox时,不在操作该应用对应的按钮的checkbox,也就是整个行不是全选了。应用对应的checkbox用来进行删除操作。

React使用antd Table生成层级多选组件
React使用antd Table生成层级多选组件
React使用antd Table生成层级多选组件

  最近使用react + redux + webpack进行web开发,感觉进步很快,已经熟悉了基本的流程。后续要研究一下webpack。