字段值过长隐藏部分处理和禁止输入空格和换行

晨雨初听--行者无疆

已于 2023-05-06 17:49:32 修改

阅读量347

点赞数

文章标签： react.js 前端 typescript

于 2023-05-06 17:33:34 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44177229/article/details/130531619

版权

在React和Antd的项目中，对于Table组件中的长字段值，可以使用样式处理进行隐藏并显示Tooltip。同时，对textarea输入进行控制，阻止空格和换行符的添加，以实现特定的数据显示和输入格式要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react+antd中页面展示的数据Table中字段值过长隐藏部分处理

title:‘名称’，
dataIndex:‘name’,
width:‘20%’,
render:(text,record) =>{
return(

<div style ={{width:200,overflow:‘hidden’,textOverflow:‘ellipsis’,whiteSpace:‘nowrap’}}
>{text}

)
}

–Tooltip 需要引入该组件

页面文本框(TEXTAREA)中输入文字,比如给字段添加描述备注等，输入时需要去除空格和换行

displayField=(displayType,name,valueRange)=>{
switch(displayType){
case ‘TEXTAREA’:{
const handleKeyDown =(e) =>{
if(e.keyCode=32 || e.keyCod=13){ //三个等号
e.preventDefault();
return;
}
}
return(<TextArea autosize ={{minRows:2,maxRows:5}} onKeyDown ={(e) =>handleKeyDown(e)}/>)
}
}
}