让代码 精简,优雅
1 - 理清结构,层次,类型
2 - 利用模块,递归,分解逻辑,
clean code
// 递归渲染 + jsx props 展开
renderOption(config, level /** level标识渲染层级 */) {
return config.map(item => {
let func
const methodKey = item.option.methods
if(methodKey) {
func = getMethods(methodKey)
}
return <UnFormItem
option={ item.option }
class={ level === 1 ? 'mr-b-16': '' }
>
<item.tag
style={ item.option.style }
placeholder={item.option.label}
v-model={this.editorStore[item.option.model]}
size="small"
{ ...{ props: item.option }}
{ ...{ on: func && func(this.editorStore, item) }}
>
{
item.tag === 'el-button' ? item.option.label : ''
}
{
item.children && this.renderOption(item.children, level + 1)
}
</item.tag>
</UnFormItem>
})
}