[QUESTION]请问自定义渲染单元格如何实现以下效果?
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 486
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 16
Description
代码为:
const CustomTitleLayout = (args) => {
const { table, row, col, rect } = args
const { height, width } = rect ?? table.getCellRect(col, row)
const record = table.getCellOriginRecord(col, row)
const field = table.getHeaderField(col, row)
const [hover, setHover] = useState(false)
// console.log(args, record, record?.original_link)
const container = (
<Group
attribute={{
// width: width - 12,
// height: height - 20,
width,
// height,
boundsPadding: 10,
dy: 10,
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'flex-start',
// alignContent: 'center',
alignItems: 'center',
cursor: 'pointer'
}}
onClick={() => {
if (!record?.original_link) return
createTagA(record?.original_link)
}}
onMouseEnter={() => {
setHover(true)
}}
onMouseLeave={() => {
setHover(false)
}}
>
<Text
attribute={{
text: record?.[field] || '--',
fill: hover ? '#0ca448' : '#333',
fontSize: 14,
fontFamily: 'sans-serif',
whiteSpace: 'normal',
maxLineWidth: width - 35,
cursor: 'pointer',
lineHeight: 22,
boundsPadding: [0, 5, 0, 10],
disableAutoClipedPoptip: true
}}
></Text>
{hover && (
<Image
attribute={{
width: 14,
height: 14,
cursor: 'pointer',
image: IconRedirect,
boundsPadding: [3, 0, 0, 0]
}}
></Image>
)}
</Group>
)
return container
}
请问如何配置customLayout ,使鼠标移入后,显示icon,且icon跟随文字后且文字可以换行。
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the customLayout API and the supplied CustomTitleLayout example. Check how Group, Text, and Image handle hover state, wrapping, sizing, and child positioning. Done means a hovered link cell shows the icon after the wrapped text, keeps the requested styling, and preserves click behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100