【分享】宜搭多选组件,在数据展示页实现换行展示
来自:钉钉宜搭
2022-12-09
185
简介:
宜搭多选组件,数据展示页会把原数据拼接展示,如果涉及到多条较长数据时,展示不太直观。


两段代码,
一种是原始方法,
一种是react的函数组件方法,
两段代码都可以用,选择你认为好理解的代码即可.
原始方法
export function didMount() {
if (this.utils.isViewPage()) {
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()) {
let checkBoxEle = this.$('checkboxField_lbfz35vr');
ReactDOM.render(
<Yeyidiv checkBoxEle={checkBoxEle} />,
ReactDOM.findDOMNode(checkBoxEle)
);
}
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。