<template> <div v-if='isShowItem(item)' class="itemBox"> <label v-if="showLabel(item)" class="el-form-item__label labelDefaultWidth labelTextOverflow" :style="{width:item.labelWidth+'px'}"> <i v-if="item.isRequired" class="isRequiredIcon">*</i> {{item.label}} </label> <div class="el-form-item__label" :style="{width:item.width+'px'}"> <childItem :readonlyStatus='readonlyStatus' :item='item' :formParms='formParms' :type='type' :jsoneditorOpenAfter='jsoneditorOpenAfter' @enterInput='enterInput' ></childItem> </div> </div> </template> <script> import childItem from './dyncFormItemComponentChild' export default { name: 'asyncFormItemComponent', components: { childItem }, props: { type: {}, item: {}, formParms: {}, jsoneditorOpenAfter: { type: Function }, readonlyStatus: {} }, data() { return {} }, mounted() { }, methods: { enterInput(val) { this.$emit('enterInput', val) }, showLabel(item) { if (item.isHideLabel) { return false } if (!item.label) { return false } return true }, isShowItem(item) { if (this.type === 'queryArea' && item.isMoreSearch) { return false } if (!item.isHide) { return true } } } } </script> <style scoped> .isRequiredIcon{ color: red; } .itemBox{ display: flex; } .labelTextOverflow{ overflow: hidden; text-overflow: initial !important; white-space: nowrap; } .labelDefaultWidth{ width: 120px; } </style>