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

//将这段代码放到页面加载完成事件里面
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;
  }
}

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)
    );
  }
}