<template>
  <div>
    <p>这是一个非markdown页面</p>
    <el-form size="small">
      <el-row :gutter="15" type="flex" style="flex-wrap: wrap;">
        <template v-for="(item, index) in option.list2">
          <el-col v-if="item.group && item.list" :key="index" :span="item.group.span || 24">
            <el-row :gutter="15" type="flex" style="flex-wrap: wrap;">
              <el-col :span="24">{{ item.group.title || item.group }}</el-col>
              <el-col v-for="(comp, idx) in item.list" :key="idx" :span="comp.span || 12">
                <el-form-item :label="comp.label" :label-width="comp.labelWidth || '120px'" :prop="comp.key" :rules="comp.rules">
                  <component :is="comp.type"></component>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col v-else :span="item.span || 12" :key="index">
            <el-form-item :label="item.label" :label-width="item.labelWidth || '120px'" :prop="item.key" :rules="item.rules">
              <component :is="item.type"></component>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'other',
  data() {
    return {
      option: {
        groups: ['basic', 'location'],
        list: [
          { type: 'el-input', label: '名称', key: 'name' },
          { type: 'el-input', label: '地址', key: 'location' },
        ],
        list2: [
          {
            group: { title: 'basic', span: 12 },
            list: [
              { type: 'el-input', label: '名称', key: 'name' },
              { type: 'el-input-number', label: '名称1', key: 'name1' },
              { type: 'el-switch', label: '名称2', key: 'name2' },
              { type: 'el-input', label: '名称3', key: 'name3' },
            ],
          },
          {
            group: 'location',
            list: [
              { type: 'el-input', label: '地址', key: 'location' },
            ],
          },
          { type: 'el-input', label: '名称', key: 'name' },
          { type: 'el-input', label: '地址', key: 'location' },
          { type: 'el-input-number', label: '名称1', key: 'name1' },
          { type: 'el-switch', label: '名称2', key: 'name2' },
          { type: 'el-input', label: '名称3', key: 'name3' },
        ]
      }
    }
  },
  methods: {
  }
}
</script>