vue-element中弹窗里的form表单

<template>
  <div class="formitem">
    <el-form
      ref="form"
      class="page-form"
      :class="className"
      :model="formInline"
      :rules="rules"
      :label-width="labelWidth"
    >

      <el-form-item
        v-for="(item, index) in getConfigList"
        :key="index"
        :prop="item.value"
        :label="item.label"
        :class="item.className"
      >

        <!-- solt -->
        <template v-if="item.type === 'slot'">
          <slot :name="'form-' + item.value" />
        </template>
        <!-- 普通输入框 -->
        <!-- <el-row :gutter="20"> -->
        <!-- <el-col class='el-col-12'> -->
        <el-input
          v-if="item.type === 'input' || item.type === 'password'"
          v-model="formInline[item.value]"
          :type="item.type"
          :disabled="item.disabled"
          :placeholder="getPlaceholder"
          style="width:100%"
          @focus="handleEvent(item.event)"
        />
        <!-- </el-col> -->
        <!-- 文本输入框 -->
        <!-- <el-col class='el-col-12'> -->
        <el-input
          v-if="item.type === 'textarea'"
          v-model.trim="formInline[item.value]"
          :type="item.type"
          :disabled="item.disabled"
          :placeholder="getPlaceholder"
          style="width:100%"
          :autosize="{minRows: 2, maxRows: 10}"
          @focus="handleEvent(item.event)"
        />
        <!-- </el-col> -->
        <!-- </el-row> -->
        <!-- 计数器 -->
        <el-input-number
          v-if="item.type === 'inputNumber'"
          v-model="formInline[item.value]"
          size="small"
          :min="item.min"
          :max="item.max"
          @change="handleEvent(item.event)"
        />
        <el-checkbox-group v-if="item.type === 'checkbox'" v-model="formInline[item.value]" style="width:100%">
          <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
        </el-checkbox-group>
        <!-- </el-form-item> -->
        <!-- 选择框 -->
        <el-select
          v-if="item.type === 'select'"
          v-model="formInline[item.value]"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :filterable="item.filterable"
          :placeholder="getPlaceholder"
          style="width:100%"
          @change="handleEvent"
        >
          <el-option
            v-for="(childItem, childIndex) in listTypeInfo[item.list]"
            :key="childIndex"
            :label="childItem.key"
            :value="childItem.value"
          />
        </el-select>
        <!-- 日期选择框 -->
        <el-date-picker
          v-if="item.type === 'date'"
          v-model="formInline[item.value]"
          :type="item.dateType"
          :picker-options="item.TimePickerOptions"
          :clearable="item.clearable"
          :disabled="item.disabled"
          :placeholder="getPlaceholder"
          @focus="handleEvent(item.event)"
        />
        <el-tree-select
          v-if="item.type === 'treeselect'"
          v-model="formInline[item.value]"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :filterable="item.filterable"
          :placeholder="getPlaceholder"
          :data="treeData"
          style="width:100%"
          node-key="id"
          @change="handleEvent"
        />
      </el-form-item>
      <!-- </el-col> -->

    </el-form>
  </div>
</template>
<script>
import ElTreeSelect from '@/components/treeSelect/index.vue' // 树形选择器组件
export default {
  components: {
    ElTreeSelect
  },
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    formInline: {
      type: Object,
      default: () => {}
    },
    className: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: () => {}
    },
    labelWidth: {
      type: String,
      default: ''
    },
    getConfigList: {
      type: Array,
      default: () => []
    },
    getPlaceholder: {
      type: String,
      default: ''
    },
    listTypeInfo: {
      type: Object,
      default: () => {}
    },
    cities: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      value1: undefined,
      value2: [],
      value3: []
      // cities: ['菜单', '公共', '展开', '有效', '允许编辑', '允许删除']
    }
  },
  methods: {
    handleEvent() {
      this.$emit('handleEvent')
    }
  }
}
</script>
<style lang="scss" scoped>
.page-form{
  .el-form-item{
    display: inline-block;
    // float: left;
    width: 50%;
    .el-form-item__content{
      .el-input, .el-select, .el-textarea{
        width: 240px;
      }
      .el-input-number{
        .el-input{
          width: inherit;
        }
      }
    }
  }
  .el-form-block{
    display: block;
    width: 100%;
    .el-form-item__content{
      .el-textarea{
        width: 100%;
      }
    }
  }
}
</style>