iview的form表单

<template>
  <div class="bui-form-css">
    <div v-if="title" class="title">{{ title }}</div>
    <Form
      ref="modal1DataRef"
      label-colon
      label-position="right"
      :model="formObj"
      :rules="rules"
      :label-width="110"
    >
      <template v-for="(item1, index1) in contentListReal">
        <Row :gutter="16" :key="index1">
          <template v-for="(item2, index2) in item1">
            <Col :class="{'is-required': item2.required}" :span="item2.col" :key="`${index1}_${index2}`">
              <FormItem :label="item2.name" :prop="item2.key" :key="`${index1}_${index2}_${item2.key}`">
                <template v-if="item2.type === 'select'">
                  <Select v-model="formObj[item2.key]" :disabled="item2.disabled">
                    <Option
                      v-for="(item3, index3) in item2.list"
                      :key="index3"
                      :value="item3.key"
                    >{{ item3.value }}</Option>
                  </Select>
                </template>
                <template v-else-if="item2.type === 'textarea'">
                  <Input
                    v-model="formObj[item2.key]"
                    type="textarea"
                    :autosize="{minRows: 2, maxRows: 5}"
                    :disabled="item2.disabled"
                  />
                </template>
                <template v-else>
                  <Input
                    v-model="formObj[item2.key]"
                    :disabled="item2.disabled"
                  />
                </template>
              </FormItem>
            </Col>
          </template>
        </Row>
      </template>
    </Form>
  </div>
</template>

<script>
import lodash from 'lodash'
export default {
  name: '',
  props: {
    row: {
      type: Object,
      default: () => ({})
    },
    contentList: {
      type: Array,
      default: () => []
    },
    // 每行项数
    perRowItemNumber: {
      type: Number,
      default: 3
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      formObj: {},
      contentListReal: [],
      totalColNumber: 24
    }
  },
  computed: {
    perItemColNumber () {
      return Math.floor(this.totalColNumber / this.perRowItemNumber)
    }
  },
  watch: {
    row: {
      handler () {
        this.formObj = lodash.cloneDeep(this.row)
        this.formatList()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    /**
     * 将一维数组处理成二维数组
     * data: 要处理的一维数组
     * opt: {
     *    colNum: 4, // 每列数据条数
     *    isMakeUp: false // 最后一列长度小于 colNum 是否补齐，默认 false 不补齐
     * }
     */
    addArrayDimension(data, opt, func) {
      const list = lodash.cloneDeep(data)
      const colNum = opt.colNum
      const array1 = [] // 最终处理好的数组
      let array2 = [] // 过渡数组
      let diff = 0 // 余数
      let item = null
      for (let i = 0, len = list.length; i < len; i++) {
          if (i !== 0) {
            if (diff === 0 || list[i].isSingleRow === true || list[i - 1].isSingleRow === true) {
              array1.push(array2);
              array2 = [];
              diff = 0
            }
          }
          item = list[i];
          if (func) {
              func(item, i);
          }
          array2.push(list[i]);
          diff++
      }
      // 最后一列长度小于 colNum，用空数组补齐
      if (array2.length < colNum && opt.isMakeUp) {
          diff = colNum - array2.length;
          for (let i = 0; i < diff; i++) {
              array2.push('bnull');
          }
      }
      array1.push(array2);
      return array1
    },
    formatList () {
      this.contentListReal = this.addArrayDimension(
        this.contentList,
        { colNum: this.perRowItemNumber },
        item => {
          if (item.type === 'select') {
            item.list = item.list || []
          }
          item.value = this.row[item.key]
          if (item.isSingleRow) {
            item.col = this.totalColNumber
          } else {
            item.col = this.perItemColNumber
          }
          if (item.disabled === undefined) {
            item.disabled = !this.isEdit
          }
        }
      )
    }
  },
  mounted () {}
}
</script>

<style lang="less" scoped>
  .bui-form-css {
    .title {
      font-weight: bold;
      margin-bottom: 7px;
    }
    .is-required {
      /deep/ .ivu-form-item {
        .ivu-form-item-label {
          &::before {
            content: '*';
            color: red;
            margin-right: 3px;
            height: 26px;
            line-height: 30px;
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
          }
        }
      }
    }
  }
</style>