【分享】宜搭多选组件,在数据展示页实现换行展示

简介: 宜搭多选组件,数据展示页会把原数据拼接展示,如果涉及到多条较长数据时,展示不太直观。
  • 修改之前(多选组件预览状态)

image.png

  • 修改后  (多选组件预览状态)

image.png


两段代码,

一种是原始方法,

一种是react的函数组件方法,

两段代码都可以用,选择你认为好理解的代码即可.


原始方法

//将这段代码放到页面加载完成事件里面exportfunctiondidMount() {
if (this.utils.isViewPage()) {
//checkboxField_lbfz35vr替换成你的多选组件filedIdletcheckBoxEle=this.$('checkboxField_lbfz35vr'); 
letnewHtml=`<div style="font-size: 15px;padding:5px;"><span style="color: #a2a3a5;">${checkBoxEle.get('label')}</span><br/><br/>`;
checkBoxEle.getValue().forEach(item=> {
newHtml+=`<div style="padding-bottom: 4px;line-height:22px">${item}</div>`    })
newHtml+='</div><br/>';
ReactDOM.findDOMNode(checkBoxEle).innerHTML=newHtml;
  }
}

react函数组件方法

functionYeyidiv(props) {
let { checkBoxEle } =props;
constrootStyle= {
fontSize: "15px",
padding: "6px",
  }
consttitleStyle={
color: "#a2a3a5",
  }
constitemStyle={
paddingBottom: "4px;",
lineHeight: "22px",
  }
return (
<divstyle={rootStyle}><spanstyle={titleStyle}>{checkBoxEle.get('label')}</span><br /><br/>      {checkBoxEle.getValue().map(item=><divstyle={itemStyle}>{item}</div>)}<br/></div>  )
}
// 当页面渲染完毕后马上调用下面的函数,这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。exportfunctiondidMount() {
if (this.utils.isViewPage()) {
//checkboxField_lbfz35vr替换成你的多选组件filedIdletcheckBoxEle=this.$('checkboxField_lbfz35vr'); 
ReactDOM.render(
<YeyidivcheckBoxEle={checkBoxEle} />,ReactDOM.findDOMNode(checkBoxEle)
    );
  }
}
目录
相关文章
|
3月前
|
JavaScript 数据可视化 前端开发
钉钉宜搭通过js触发子表单数据联动
钉钉宜搭通过js触发子表单数据联动
|
4月前
宜搭系统发布之后,怎样能使数据下载PDF格式
宜搭系统发布之后,怎样能使数据下载PDF格式
38 1
|
4月前
|
数据管理
宜搭流程中,数据管理批量发起如何成功导入 年-月-日 时:分格式数据 当前数据管理批量发起,Excel文本中编辑时间格式如2023-12-07 20:00,批量导入生成后显示为20231207 00:00,请问如何让时:分正确显示。
宜搭流程中,数据管理批量发起如何成功导入 年-月-日 时:分格式数据 当前数据管理批量发起,Excel文本中编辑时间格式如2023-12-07 20:00,批量导入生成后显示为20231207 00:00,请问如何让时:分正确显示。
61 2
|
4月前
宜搭如何将组件的标题根据日期组件的日期动态变化?
宜搭如何将组件的标题根据日期组件的日期动态变化?
41 1
|
5月前
|
JavaScript API
「宜搭」如何在选择部门组件后,自动带出该部门下的成员,并查询该成员当月考勤天数
本文档只做参考使用,请结合具体需求修改,如有问题,概不负责!!!! 因本章涉及页面代码,请确保宜搭使用版本可使用页面JS 该篇只会获取当前部门下的成员,不包含下级部门; 注意:涉及到钉钉接口,请严格按照钉钉开放接口文档要求操作; 若此文章对您有帮助,记得点下赞同哦~
219 4
「宜搭」如何在选择部门组件后,自动带出该部门下的成员,并查询该成员当月考勤天数
|
5月前
|
数据格式
宜搭自定义页面组件 TablePc 渲染错误
宜搭自定义页面组件 TablePc 渲染错误
123 4
|
12月前
|
API 数据格式 JSON
宜搭应用与第三方系统数据互通怎么做?
使用 HTTP 连接器向宜搭的 API 发送请求。具体来说,您可以使用集成自动化中的 HTTP 连接器,设置其为定时触发,并将编写的脚本中转换后的数据作为 HTTP 请求的 body,发送 POST 请求到宜搭的 API 接口。
宜搭应用与第三方系统数据互通怎么做?
|
JavaScript
【分享】宜搭js代码验证组件校验结果(触发组件校验)
有时候需要手动触发校验,特别是自定义页面,校验通过才进行下一步 by 页一
946 1
|
JSON 数据格式
【分享】宜搭集成自动化,Groovy节点一般用法,解析JSON数据
【分享】宜搭集成自动化,Groovy节点一般用法,解析JSON数据 by 页一
1138 0
【分享】宜搭集成自动化,Groovy节点一般用法,解析JSON数据
|
JavaScript API 数据处理
【分享】宜搭开发,快速离线测试代码、组件api、组件属性
【分享】利用好浏览器的控制台功能(F12=&gt;控制台) by 页一
913 2
【分享】宜搭开发,快速离线测试代码、组件api、组件属性

热门文章

最新文章

相关产品