ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.02k stars 1.28k forks source link

🐛[BUG] ProDescriptions 组件中使用columns属性,其中一项数据使用 copyable 无法出现复制图标,这是什么原因? #8259

Open leonardo110 opened 1 month ago

leonardo110 commented 1 month ago

🐛 bug 描述

ProDescriptions 组件中使用columns属性,其中一项数据使用 copyable 无法出现复制图标,我把版本内容放下面:

📷 复现步骤

`<ProDescriptions size="small" column={3} dataSource={{ apiToken, apiAKSK, }} columns={[ { title: 'API token', key: 'apiToken', dataIndex: 'apiToken', copyable: true, render: () => { return <>**</>; }, }, { title: 'API AKSK', key: 'apiAKSK', dataIndex: 'apiAKSK', copyable: true, render: () => { return <>**</>; }, } ]}

`

上面是页面内容,下面我再发下package.json的版本

{ "name": "ant-design-pro", "version": "5.2.0", "private": true, "description": "An out-of-box UI solution for enterprise applications", "scripts": { "analyze": "cross-env ANALYZE=1 umi build", "build": "umi build", "deploy": "npm run build && npm run gh-pages", "dev": "npm run start:dev", "gh-pages": "gh-pages -d build", "i18n-remove": "pro i18n-remove --locale=zh-CN --write", "postinstall": "umi g tmp", "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier && npm run tsc", "lint-staged": "lint-staged", "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ", "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style", "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src", "lint:prettier": "prettier -c --write \"src/**/*\" --end-of-line auto", "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less", "openapi": "umi openapi", "precommit": "lint-staged", "prettier": "prettier -c --write \"src/**/*\"", "start": "cross-env UMI_ENV=dev umi dev", "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev", "start:no-mock": "cross-env MOCK=none UMI_ENV=dev umi dev", "start:no-ui": "cross-env UMI_UI=none UMI_ENV=dev umi dev", "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev umi dev", "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev umi dev", "pretest": "node ./tests/beforeTest", "test": "umi test", "test:all": "node ./tests/run-tests.js", "test:component": "umi test ./src/components", "serve": "umi-serve", "tsc": "tsc --noEmit" }, "lint-staged": { "**/*.less": "stylelint --syntax less", "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js", "**/*.{js,jsx,tsx,ts,less,md,json}": [ "prettier --write" ] }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 10" ], "dependencies": { "@ant-design/icons": "^4.5.0", "@ant-design/pro-descriptions": "^1.9.0", "@ant-design/pro-form": "^1.43.0", "@ant-design/pro-layout": "^6.32.0", "@ant-design/pro-list": "^1.20.0", "@ant-design/pro-table": "^2.56.0", "@umijs/route-utils": "^2.0.3", "antd": "^4.17.0", "axios": "^1.3.4", "classnames": "^2.2.6", "codemirror": "^5.60.0", "echarts": "^5.4.2", "lodash": "^4.17.11", "module-menu": "*", "moment": "^2.25.3", "omit.js": "^2.0.2", "rc-menu": "^9.1.0", "rc-resize-observer": "^1.1.2", "rc-util": "^5.14.0", "react": "^17.0.0", "react-codemirror2": "^7.2.1", "react-countup": "^6.4.2", "react-dev-inspector": "^1.1.1", "react-dom": "^17.0.0", "react-helmet-async": "^1.0.4", "umi": "^3.5.0", "umi-serve": "^1.9.10" }, "devDependencies": { "@ant-design/pro-cli": "^2.0.2", "@types/express": "^4.17.0", "@types/history": "^4.7.2", "@types/jest": "^26.0.0", "@types/lodash": "^4.14.144", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "@types/react-helmet": "^6.1.0", "@umijs/fabric": "^2.6.2", "@umijs/openapi": "^1.3.0", "@umijs/plugin-blocks": "^2.0.5", "@umijs/plugin-esbuild": "^1.0.1", "@umijs/plugin-openapi": "^1.2.0", "@umijs/preset-ant-design-pro": "^1.2.0", "@umijs/preset-dumi": "^1.1.7", "@umijs/preset-react": "^1.8.17", "@umijs/preset-ui": "^2.2.9", "@umijs/yorkie": "^2.0.3", "carlo": "^0.9.46", "cross-env": "^7.0.0", "cross-port-killer": "^1.1.1", "detect-installer": "^1.0.1", "enzyme": "^3.11.0", "eslint": "^7.1.0", "express": "^4.17.1", "gh-pages": "^3.0.0", "jsdom-global": "^3.0.2", "lint-staged": "^10.0.0", "mockjs": "^1.0.1-beta3", "prettier": "^2.3.2", "puppeteer-core": "^8.0.0", "stylelint": "^13.0.0", "swagger-ui-react": "^3.52.3", "typescript": "^4.2.2" }, "engines": { "node": ">=10.0.0" }, "gitHooks": { "commit-msg": "fabric verify-commit" } }

上面的columns 我去掉了多余字段,只留下有问题的字段,下面是页面上的呈现:

image

© 版本信息

zhuba-Ahhh commented 2 weeks ago

使用了官网例子试了下,render自定义了和数据为空都不会出现复制

https://codesandbox.io/p/sandbox/columns-pei-zhi-forked-9ywxmm?file=%2FApp.tsx

leonardo110 commented 2 weeks ago

使用了官网例子试了下,render自定义了和数据为空都不会出现复制

https://codesandbox.io/p/sandbox/columns-pei-zhi-forked-9ywxmm?file=%2FApp.tsx

所以这个就只能自己手写一个实现了???