中间表单显示区域采用的render+jsx方式来进行渲染,因为组件是多样的,如果采用传统写法则需要写大量的v-if、v-else来进行判断,而且扩展起来不方便。
jsx的写法例子:这段代码的作用就是双击变成input输入框,离开焦点实现数据的编写。
colLabelTitle(h, currentItem, index, list) {
const { activeItem } = this.$listeners
const config = currentItem.__config__;
//设置扩展的样式信息
let className = this.activeId === config.formId ? 'drawing-item colLabelTitle active-from-item ' : 'drawing-item colLabelTitle ';
className=className+" "+currentItem.__config__.extendClass;
if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered';
//字体大小信息
let labelSty="text-align:center;font-size:"+currentItem.__config__.fontSize+"px";
//字体对齐信息
let alignSty=`text-align:${currentItem.__config__.align};`;
return (
<Col span={config.span} style={alignSty} class={className} nativeOndblclick={event => { currentItem.__config__.editor=true;event.stopPropagation(); }}
nativeOnClick={event => { activeItem(currentItem); event.stopPropagation(); }}>
<Input autofocus={true} v-show={currentItem.__config__.editor===true}
on-on-blur={event => {currentItem.__config__.editor=false;event.stopPropagation(); }}
v-model={currentItem.__config__.label} />
<span v-show={currentItem.__config__.editor!==true} style={labelSty}>{currentItem.__config__.label}</span>
{components.itemBtns.apply(this, arguments)}
</Col>
)
},
注意点:
- 双击点击事件
nativeOndblclick={event => { currentItem.__config__.editor=true;event.stopPropagation(); }}
单击点击事件:
nativeOnClick={event => { activeItem(currentItem); event.stopPropagation(); }}
- 组件以前的 <Input @on-blur=“blurFun”/>blur事件采用jsx写的话,写法如下:
on-on-blur={event => {currentItem.__config__.editor=false;event.stopPropagation(); }}
jsx里面编写for循环:
<colgroup>
{childrens.map((itemColObj) => <col width={itemColObj.__config__.colWidth} />)}
</colgroup>
jsx里面实现v-html,通过domPropsInnerHTML来实现
<span domPropsInnerHTML={currentItem.__config__.label} class='cell_span' style={labelSty} v-show={currentItem.__config__.editor===false&¤tItem.__config__.label!=null&¤tItem.__config__.label!==''}>
</span>