slot插槽灵活应变显示表单的顺序，多少

<el-form ref="moreForm" :model="formInline" inline>

            <el-row type="flex" class="flex-row" :gutter="0">

              <slotvue :head-list="headList[32]">

                <template slot="单据日期">

                  <el-form-item label="单据日期" style="margin-right:0x">

                    <date-range-picker v-model="formInline.dateArea" style="width:100%" @change="changeDate" />

                  </el-form-item>

                </template>

                <template slot="单据号">

                  <el-form-item label="单据号" style="margin-right:0x">

                    <el-input v-model="formInline.strreceiptno" placeholder="请输入" clear style="width:100%" />

                  </el-form-item>

                </template>

                <template slot="合同编号">

                  <el-form-item label="合同编号">

                    <el-input v-model="formInline.strcontractcode" clearable placeholder="请输入" style="width:100%" />

                  </el-form-item>

                </template>

                <template slot="合同名称">

                  <el-form-item label="合同名称">

                    <el-input v-model="formInline.strcontractname" clearable placeholder="请输入" style="width:100%" />

                  </el-form-item>

                </template>

                <template slot="往来单位">

                  <el-form-item label="往来单位">

                    <contact-unit-picker v-model="formInline.lngcustomerid" placeholder="请选择往来单位" style="width:100%" />

                  </el-form-item>

                </template>

                <template slot="合同类别">

                  <el-form-item label="合同类别" style="margin-right:0x">

                    <tree-select

                      v-model="formInline.contracttypepath"

                      :options="contractTypeTree"

                      placeholder="请选择"

                      filterable

                      clearable

                      :props="{

                        label:'treedatacodeandname',

                        value:'path',

                        children:'childList'

                      }"

                      style="width:100%"

                    />

                  </el-form-item>

                </template>

                <template slot="状态">

                  <el-form-item label="状态">

                    <el-select v-model="formInline.bytstatus" placeholder="请选择" style="width: 100%;">

                      <el-option

                        v-for="item in statusList"

                        :key="item.value"

                        :label="item.label"

                        :value="item.value"

                      />

                    </el-select>

                  </el-form-item>

                </template>

              </slotvue>

</el-row>

</el-form>

headList: {

        31: [

          { name: '单据日期' },

          { name: '单据号' },

          { name: '合同编号' },

          { name: '合同名称' },

          { name: '往来单位' },

          { name: '合同类别' },

          { name: '状态' }

        ],

        32: [

          { name: '单据日期' },

          { name: '状态' },

          { name: '单据号' },

          { name: '合同编号' },

          { name: '合同名称' },

          { name: '往来单位' }

        ]

      }

slotvue组件

<template>

  <div class="dynamic">

    <el-col v-for="(item,index) in headList" :key="index" :span="24">

      <slot :name="item.name" />

    </el-col>

  </div>

</template>

<script>

export default {

  props: {

    headList: {

      type: Array,

      default: () => []

    }

  },

  data() {

    return {

    }

  }

}

</script>