开发者社区> 页一 > 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

image.png

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

image.png


两段代码,

一种是原始方法,

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

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


原始方法

//将这段代码放到页面加载完成事件里面
export function didMount() {
  if (this.utils.isViewPage()) {
    //checkboxField_lbfz35vr替换成你的多选组件filedId
    let checkBoxEle = this.$('checkboxField_lbfz35vr'); 
    let newHtml = `<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函数组件方法

function Yeyidiv(props) {
  let { checkBoxEle } = props;
  const rootStyle = {
    fontSize: "15px",
    padding: "6px",
  }
  const titleStyle={
    color: "#a2a3a5",
  }
  const itemStyle={
    paddingBottom: "4px;",
    lineHeight: "22px",
  }
  return (
    <div style={rootStyle}>
      <span style={titleStyle}>{checkBoxEle.get('label')}</span><br /><br />
      {checkBoxEle.getValue().map(item => <div style={itemStyle}>{item}</div>)}
      <br />
    </div>
  )
}

// 当页面渲染完毕后马上调用下面的函数,这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  if (this.utils.isViewPage()) {
    //checkboxField_lbfz35vr替换成你的多选组件filedId
    let checkBoxEle = this.$('checkboxField_lbfz35vr'); 
    ReactDOM.render(
      <Yeyidiv checkBoxEle={checkBoxEle} />,
      ReactDOM.findDOMNode(checkBoxEle)
    );
  }
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【大陈子学低代码】— Vol.4 用宜搭实现项目人员人事报表统筹管理
通过宜搭搭建项目人员人事管理统筹表,轻松实现人员异动在线管理,打破项目数据孤岛,实现高效统筹。
0 0
磁贴布局在钉钉宜搭报表设计引擎中的实现
先来看看报表磁贴布局改造完成的大致效果~
0 0
重庆华美:用宜搭实现全流程管理上云,节约超百万研发成本
重庆华美用宜搭搭建了信息化管理平台,开发效率提升300%、节省沟通成本60%、并节约了百万研发成本。
0 0
一指阁:用宜搭实现全面数字化管理,助力企业打开十亿市场新空间
一指阁通过宜搭实现了全面数字化管理,整体运营效率提高了60%,人工成本整体降低了80%,更打开了十亿级别市场空间!
0 0
宜搭-如何通过集成&自动化实现入职建群及资产领用
HR在办理新员工入职时,需要在钉钉管理后台为新员工办理入职,并且需要创建一个新人引导群,由群内主管带领新员工,并且会帮新员工申请资产。那么我们如何迅速快捷的完成新员工入职工作呢?
0 0
里工实业:用宜搭自主搭建MES系统,实现生产全流程管理
里工实业是全球智能制造AIoT装备市场的创新者,用宜搭自主搭建MES系统,实现了生产全流程管理。
0 0
【宜搭客户说第七期】宜搭帮助社会组织实现高效协同
“宜搭客户说”,倾听用户的声音,感受来自百行千业的用户使用宜搭的心得。
0 0
【宜搭客户说第六期】制造业使用宜搭开发应用实现提效降本
“宜搭客户说”,倾听用户的声音,感受来自百行千业的用户使用宜搭的心得。 第六期“宜搭客户说”带你走近宜搭在制造业的应用,了解这家来自义乌的制造业公司如何通过宜搭轻松搭建应用,实现降本增效。
0 0
+关注
文章
问答
来源圈子
更多
「宜搭」是云钉原生低代码平台(钉钉 PaaS - aPaaS),让企业应用搭建更简单! 帮助中小企业降本提效,加强组织的数字化自主权; 帮助大型企业释放个体创新力,助力组织创新涌现。
+ 订阅
相关文档:
文章排行榜
最热
最新
相关电子书
更多
低代码开发师-宜搭
立即下载
基于低代码平台钉钉宜搭的工程项目管理实践
立即下载
宜搭 - 企业智能化应用搭建平台
立即下载