React+antd table中的每列内容换行

1,效果图如下

2,分隔数组split(",")

3,详细代码代码如下

const leadsDetails = this.props.leadsDetails;
const audits = JSON.stringify(leadsDetails) !== ‘[]‘ ? leadsDetails.audits : [];

const auditsColumns = [
{
title: ‘创建时间‘,
dataIndex: ‘created_at‘,
key: ‘created_at‘,
},
{
title: ‘用户‘,
dataIndex: ‘user‘,
key: ‘user‘,
},
{
title: ‘内容‘,
dataIndex: ‘content‘,
key: ‘content‘,
render: (text, record) =>{
let contentStr;
let br=<br></br>;
let result=null;
for(let i=0;i<audits.length;i++){
let contentStr=audits[i].content;
contentStr=text.toString().split(",");
if(contentStr.length<2){
return text;
}
for(let j=0;j<contentStr.length;j++){
if(j==0){
result=contentStr[j];
}else{
result=<span>{result}{br}{contentStr[j]}</span>;
}
}
return <div>{result}</div>;
}
},
},

————————————————
版权声明:本文为CSDN博主「小红同学5」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/xh_960125/article/details/89309547

原文地址:https://www.cnblogs.com/ygunoil/p/12364891.html

时间: 2024-08-30 11:20:10

React+antd table中的每列内容换行的相关文章

关于Jquery获取Table中td内的内容

$(this).children().eq(1).text()获取的是显示的值$(this).children().eq(1).html()获取的是<td></td>之间的所有内容$('.trSelected',grid).find("td").eq(7).text();获取的是选中的某行的内容 遍历表<table id="gird"..... $("#grid tr").each(function() {     

JavaScript实现获取table中某一列的值

JavaScript实现获取table中某一列的值 1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &

JavaScript获取table中某一列的值的方法

1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

Table中td的长字符串换行处理

当需要在<table>中的<td>中显示一段很长的字符创时,如下句代码: Document.getElementById(<td>.id).innerText="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX........" 可以在该table中增加 style="table-layout:fixed;word-break:break-all" 属性

关于页面中table中相同的列自动合并

代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type&qu

【前端基础】统一修改table中某一列的值

一.需求 需求比较简单,就是先修改第一列中age下面的input中的值,然后点击age这个submit按钮,会将这一列中所有的值都修改称第一列中age对应的值,如上图所示: 二.实现 1.针对这个需求,我第一反应就是先获取第一列age这列对应的value,然后用这个值给其他行的这一列的value进行赋值:所以我的代码实现如下: <!DOCTYPE html> <html> <head> <title>test</title> </head&

HTML锁定Table中某一列

1. 2. 3. 1 function ChangeTable() 2 { 3 var type = document.getElementById("ddl_ReportType").value.Trim(); 4 5 if (type == 1) 6 { 7 document.getElementById("TableInfo").innerHTML = TableYX(); 8 } 9 else if (type == 2) 10 { 11 document.

如何让Table中的第一列和第二列的值相乘然后赋值给第三列

因为需求的原因所以这样做,不废话了,直接上代码,我用的GridView绑定的数据,table也一样,因为GridView通过浏览器编译后的代码就是table.下面是aspx页面的Html代码: <asp:GridView ID="gv_new" runat="server" AutoGenerateColumns="False" CssClass="tb_data"                        Widt

封装Jquery 合并table中任何同列数据

封装代码: jQuery.fn.rowspan = function (colIdx) { //封装JQuery同列值相同合并小插件 return this.each(function () { var that; $('tr', this).each(function (row) { $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) { if (that != null && $(this).h