dyncFormItemComponent.vue

<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>