当前位置：首页>编程日记>正文

antd checkbox 默认选中_antd 开发的一些坑（一）

编程日记 2023/10/15 22:32:54

使用antd以来，有些东西总是现用现查，现总结一波，以提升开发效率

一：表格下钻及默认展开一级

{treeData && treeData.length > 0 ? (<TablerowKey={record => `${record.deptCode}`}loading={tableLoading}defaultExpandedRowKeys={treeData.map(item => item.deptCode)} columns={this.state.columns}dataSource={treeData}pagination={false}onExpand={this.handldOnExpand}scroll={{ y: 450 }}/>) : (<div style={{ minHeight: 450, textAlign: 'center', boxSizing: 'border-box', paddingTop: '200px' }}><Spin /></div>)}解释一： modal里面的table，为什么要判断 treeData.length>0? 再展示table？ 因为这个treedata的值是在state: treeData:[],上定义的，接口返回再赋值，如果不判断的话，组件初次render之后，
就会执行defaultExpandedRowKeys={treeData.map(item => item.deptCode)} ，等数据回来，第一级数据就不会展开了，因为初次识别的是一个空数组，所以，这里判断
length>0才展示就会默认展示返回的一级数据了。解释二：根据部门的deptCodePaths值判断的onExpand={this.handldOnExpand}是按照部门数下钻的，所以，这里有三个函数比较重要，注意理解：// 展开加号handldOnExpand = async (expanded, record) => {if (!expanded || record.children.length) returnlet {treeData,} = this.statelet res = await this.getTableChildrenData({ deptIsUserChoose: false, deptCodePaths: [record.deptCodePath] })let node = this.findTreeNode(record.deptCode, treeData)node.children = resthis.setState({ tableLoading: false })}//根据传入的nodeId查找到节点findTreeNode = (nodeId, treeList) => {let node = nullif (!treeList || treeList === []) {return []}for (const value of treeList) {if (+value.deptCode === +nodeId) {node = valuereturn node} else if (Array.isArray(value.children)) {node = this.findTreeNode(nodeId, value.children)if (node) return node}}}// 得到子节点getTableChildrenData({ deptIsUserChoose = false, deptCodePaths = [] }) {let {tableLoading,} = this.stateif (tableLoading) returnthis.setState({ tableLoading: true })return  // this.props.enpsStore.getEnpsSituationDetail({ 掉接口// ...this.props.searchParams,// deptIsUserChoose,//  deptCodePaths// }).then(res => res)}